【CSS】CSS实现三角形（一）

话不多说，下面介绍两种比较常用的写法：

一、border边框

宽和高都设置为0px，通过border的交点创建三角形，这应该是使用的最多的一种写法。

.triangle{
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: red green blue orange;
}

效果图如下：

好了，四个小三角已经初见雏形了，只需要稍做修改，就能一个个拿出来。

1、上三角

原理简单粗暴，既然我只需要最上面的那个小三角，其他几个角的边框颜色设置为透明即可。

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

效果图：

2、下三角

.triangle{
    width: 0;
    height: 0;
    border-bottom: 100px solid blue;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

效果图：

3、左三角

.triangle{
    width: 0;
    height: 0;
    border-left: 100px solid orange;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

效果图：

4、右三角

.triangle{
    width: 0;
    height: 0;
    border-right: 100px solid green;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

效果图：

不过需要注意的是，其他的几个边还是占据空间的哦，一般会配合定位position来用。

5、直角三角形

如果需要直角三角形，上面的写法似乎并不满足，换个思路，看下面：

.triangle1{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
.triangle2{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
.triangle3{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}
.triangle4{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

效果如下：

除了border之外，还有没有什么办法也可以实现三角形的效果呢？

二、 linear-gradient渐变

对，你没有看错，就是渐变。具体需要怎么操作呢？

1、直角三角形

这里我们需要配合background-image使用，下面说一下思路：

（1）先设定一个长宽均为100px的正方形

（2）设定渐变轴，这里需要获取到的是直角三角形，我们可以简单的设定轴的方向是45度或者-45度，可以结合border边框下最开始的那四个小三角来思考。45度和-45度相当于各为两个三角形，方向不同而已。

（3）现在开始设置渐变色，其中一个颜色设置为透明，并且第一个颜色停止渲染的位置是在50%，这样，一个三角形就绘制出来了。

.triangle1{
      width: 100px;
      height: 100px;
      background-repeat: no-repeat;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0) 50%, #f00 50%);
}
.triangle2{
      width: 100px;
      height: 100px;
    background-image: linear-gradient(-45deg, #f00 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle3{
      width: 100px;
      height: 100px;
      background-repeat: no-repeat;
    background-image: linear-gradient(45deg, #f00 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle4{
      width: 100px;
      height: 100px;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 50%, #f00 50%);
}

效果如下：

2、非直角三角形

非直角三角形需要注意的就是，角度需要根据设置的宽高自行调整。

.triangle {
    width: 100px;
      height: 100px;
      background-repeat: no-repeat;
    background-image: linear-gradient(26deg, red 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(154deg, green 50%, rgba(255, 255, 255, 0) 50%);
    background-size: 100% 50%;
    background-position: top left, bottom left;
}

这里为了区分，放了两种颜色，用的时候可以把颜色统一就OK了。

其他方向的三角形大家也可以自己参考着试一试哦，本文就先告一段落了。

下一篇文章将会通过伪元素的方式实现三角形：CSS实现三角形（二）

另外，如果有什么其他好方法也可以评论区补充哦！