css三角形的运用

CSS三角形是前端开发中常用的效果，它的实现方法有很多种，下面就简单介绍几种实现方法。

/* 第一种实现方法：利用border实现 */
.triangle {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent #f00 transparent;
}

/* 第二种实现方法：利用伪元素before和transform实现 */
.triangle {
    position: relative;
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent #f00 transparent;
}
.triangle:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    background: #f00;
}

/* 第三种实现方法：利用伪元素after和border-radius实现 */
.triangle {
    position: relative;
    width: 40px;
    height: 40px;
    background: #f00;
    z-index: 1;
}
.triangle:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-right: 20px solid #f00;
    border-top: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-radius: 10px 0 0 10px;
    z-index: -1;
} 

通过以上实现方法，我们可以得到许多不同形态的三角形，比如实心的、空心的等等。同时，这些实现方法也可以用于实现其他图形，例如矩形、梯形等等。