css三角怎么做

CSS三角是我们在制作网页过程中常常使用的一种形状，并且高度可定制化。以下是一些方法来实现css三角：

//方法一：采用border属性，用透明色清空不需要的部分
.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

//方法二：使用:before或:after伪元素进行css三角的实现
.triangle:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 100px 100px 0;
    border-color: transparent red;
    border-style: solid;
}

//方法三：使用transform旋转属性与绝对定位来实现
.triangle {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
}

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

以上是三种实现css三角的方法，根据你的需求选择其中一种即可。另外，需要注意的是因为不同浏览器渲染的方法不同，所以以上方法可能不完全兼容。