css三角形怎么

CSS三角形是一种常见的效果，在网页设计中非常实用。它可以用来美化按钮、导航栏和其他需要突出的元素。

实现CSS三角形的方法有很多种，其中比较简单的方法是使用伪类:before和:after以及transform属性。

代码如下：
.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 20px;
    border-color: transparent transparent #007bff transparent;
    position: relative;
}

.triangle:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 40px;
    border-color: transparent transparent #e6e6e6 transparent;
    transform: rotate(45deg);
} 

在上述代码中，.triangle类定义了一个宽为0高为0的元素，并设置了四个边框的样式和颜色，其中只有下边框有颜色，其他三个边框为透明。这样便形成了一个底部为扁平的等边三角形。

接着，在伪类:before中定义了一个类似的三角形，只不过顶点朝上，并且旋转了45度。通过设置该伪类的位置，可以让两个三角形重叠在一起，形成完整的三角形。

以上就是使用CSS实现三角形的简单方法。在实际应用中，可以根据需要进行调整，如更改颜色、大小、样式等，以达到更好的效果。