html和css实现一个三角形代码示例

涛哥
Html代码

以下是一个使用 HTML 和 CSS 实现三角形的示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>三角形</title>
	<style>
		.triangle {
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom: 100px solid red;
		}
	</style>
</head>
<body>
	<div class="triangle"></div>
</body>
</html>

这个三角形代码示例创建了一个红色的三角形，通过使用 CSS 边框属性来实现。.triangle 类设置了一个 0 宽度和高度的 div 元素，并使用 border-left、border-right 和 border-bottom 属性来定义三角形的形状和颜色。左右两个边框的宽度为 50px，高度为 0，因此它们不会显示出来，底部边框的宽度为 100px，高度为 0，它会被渲染为三角形。

 
  • 三角形