怎样用css写三角形

使用CSS可以很方便地制作出各种形状，其中三角形也是比较常见的一种。下面介绍两种方法。

1. 使用border

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

代码解释：

首先将元素宽高设为0，然后通过border的方式将三个边界设置为不同的样式，从而生成一个三角形。其中，我们将上边界设置为50px，可以通过修改这个值来改变三角形的大小；将右、左边界设置为透明即可只显示上边界。

2. 使用伪类

.triangle {
    position: relative;
    width: 100px;
    height: 100px;
}
.triangle::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
}
    

代码解释：

同样需要将元素宽高设为0。不过这里是通过伪类来创建一个实际的空白元素，再将其边框设置为三角形的样式。我们将上边界的大小设置为50px，同样可以通过修改这个值来改变三角形的大小。

以上两种方法均可以通过修改颜色等样式属性来实现不同颜色、多个三角形、不规则形状等效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！