css伪类画一个三角形 |设置容器及列表的css样式

.triangle {
height: 0;
width: 0;
border-top: 50px solid transparent;
border-left: 50px solid #000;
border-right: 50px solid transparent;
}

首先，大家需要设置一个 .triangle 类来定义一个三角形。接下来，大家利用 border 属性添加三角形的边框。通过将左右边框的宽度设置为 50px，大家就能够获得一个等腰三角形。同时，为了清晰地展示出三角形，大家将底部的边框设置为透明。

使用伪类的优点在于，大家可以轻松地使用类中的属性设置特定的样式。在上述例子中，大家的三角形是定义在类中的。但大家可以通过伪类来选择要添加三角形的元素：

.triangle::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
border-top: 50px solid transparent;
border-left: 50px solid #000;
border-right: 50px solid transparent;
}

在这个例子中，大家利用 ::before 伪类来将三角形添加到所选择的元素前面。此外，大家还设置了一个 content 属性，将三角形定义为元素的内容。由于 content 属性的值为空，因此不会产生任何内容。大家还使用了 display:block 和 position:absolute，以使三角形可见于其父元素之上，并且坐落在元素的左上角。

总的来说，使用伪类可以让大家轻松地实现一些基本的图形，如三角形、矩形和椭圆等等。