css画有边框的三角形 |css横向平铺

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

在上面的代码中，大家创建了一个类名为“triangle”的div元素。大家首先将该元素的宽度和高度设置为零。然后，大家使用border-top、border-right和border-bottom属性来创建一个红色的三角形。在这里，大家为border-top和border-bottom设置了透明边框，使三角形的上下边缘保持透明。

为了使三角形具有边框，大家可以使用outline属性。outline可以将三角形的轮廓线以指定的宽度和颜色呈现出来。下面是一个示例代码：

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
outline: 3px solid black;
}

在上面的代码中，大家为三角形添加了一个宽度为3个像素、颜色为黑色的轮廓线。

在CSS中，您可以使用许多技巧来创建各种形状和对象。使用大家在这篇文章中学到的技巧，您现在可以创建一个带有边框的三角形了。祝好运！