css三角形画法

CSS三角形是CSS中非常常见的一种形状，它可以通过CSS的border属性实现，下面我们来看一下几种CSS三角形的画法。

/* 1. 通过border实现等腰直角三角形 */
.triangle1 {
    width: 0;
    height: 0;
    border-top: 50px solid #000;
    border-right: 50px solid transparent;
}

/* 2. 通过border实现等腰三角形 */
.triangle2 {
    width: 0;
    height: 0;
    border: 50px solid #000;
    border-top-color: transparent;
}

/* 3. 通过伪元素实现直角三角形 */
.triangle3 {
    width: 0;
    height: 0;
    position: relative;
    border-bottom: 50px solid #000;
}
.triangle3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 50px solid #000;
    border-right: 50px solid transparent;
}

/* 4. 通过伪元素实现等边三角形 */
.triangle4 {
    width: 0;
    height: 0;
    position: relative;
}
.triangle4::after {
    content: "";
    position: absolute;
    top: -28.87px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 57.74px solid #000;
} 

通过上述代码实现的四种CSS三角形，可以为网页设计带来更加灵活多样的界面效果。需要注意的是，CSS三角形的画法需要结合元素的宽度和高度来确定，因此在使用过程中需要仔细调整参数。