css写小三角形 |css hr标签

<style>
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent; /*左边的宽度*/
border-right: 10px solid transparent; /*右边的宽度*/
border-bottom: 10px solid red; /*下边的宽度和颜色*/
}
</style>
<div class="triangle"></div>

上述代码中的三角形是一个红色的，其中的重点是border的属性。在这里，大家使用了border的三个属性来精确地控制三边的边框宽度，同时将另外两边设置为透明色（transparent），这样就只保留下下边框，从而实现了三角形的效果。

大家还可以结合使用:before或:after伪元素，来更加灵活地控制小三角形的位置和样式。

<style>
.triangle {
position: relative;
width: 0;
height: 0;
}
.triangle:before {
content: "";
position: absolute;
top: -10px;
left: 0;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
}
</style>    
<div class="triangle"></div>

上述代码使用了:before伪元素，将三角形生成在原有元素的上方。通过设置伪元素的位置，属性，和边框设置，大家可以控制出任何形状和大小的三角形。

通过使用CSS，小三角形的实现变得非常容易。加上相关的样式，小三角形可以让设计看起来更加生动而有趣。