[分享]css写线性正三角形

在CSS中，我们可以使用伪元素来制作各种形状。下面我们来介绍如何使用CSS实现正三角形：

 .triangle {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #000;
        margin: 50px auto;
    } 

如上所示，我们给一个div元素设置了width和height都为0，然后通过设置三条边的边框为透明色，只保留下边框的颜色，使其成为一个等边三角形。其中，设置宽度为50px就相当于是三角形底边的长度，设置高度为100px就相当于是三角形高的一半。

如果需要制作一个正三角形，则需要调整三角形的角度为60度，具体实现如下：

 .triangle {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 87px solid #000;
        margin: 50px auto;
        transform: rotate(60deg);
    } 

我们使用transform属性来旋转三角形，将角度设置为60度即可制作出一个正三角形。

通过以上CSS代码，我们就可以轻松实现正三角形的制作，为网页的美观增添了一份亮点。