使用CSS制作三角形

今天，我们来学习下，怎么用css制作三角形

我们先写一个div，其宽100px，高100px，边框宽度100px，上边框颜色是红色，右边框颜色是蓝色，下边框颜色是黑色，左边框颜色是粉色，效果是这样的：

.triangle{
   width: 100px;
   height: 100px;
   border-width: 100px;
   border-style: solid;
   border-top-color: red;
   border-right-color: blue;
   border-bottom-color: black;
   border-left-color: pink;
}

图示：

从这张图里，其实大家可以看到，对于这个div来说，其各个方向的border都很明确，就是一个个的梯形，如果，我们把div的高度设置为 0， 会出现什么效果呢？

.triangle{
   width: 100px;
   height: 0;
   border-width: 100px;
   border-style: solid;
   border-top-color: red;
   border-right-color: blue;
   border-bottom-color: black;
   border-left-color: pink;
}

每个方向的border都变成了一个个的梯形，看到这里，其实离我们的目标-制造一个三角形已经非常接近了，不过，我们先不急，我们先来看看怎么制作一个梯形。

比如说，我们想只展示上面那个梯形，怎么办？

很简单，我们只需要把其他方向的border-color设置为transparent不就行了？？！！！

行，我们试试各个方向的梯形怎么实现

上梯形：

.triangle{
   width: 100px;
   height: 0;
   border-width: 100px;
   border-style: solid;
   border-color: red transparent transparent transparent;
}

右梯形：

.triangle{
   width: 0;
   height: 100px;
   border-width: 100px;
   border-style: solid;
   border-color: transparent blue transparent transparent;
}

下梯形

.triangle{
   width: 100px;
   height: 0;
   border-width: 100px;
   border-style: solid;
   border-color: transparent transparent black transparent;
}

[图片上传中...(屏幕快照 2018-01-31 下午9.42.26.png-a9d711-1517406209701-0)]

左梯形：

.triangle{
   width: 0;
   height: 100px;
   border-width: 100px;
   border-style: solid;
   border-color: transparent transparent transparent pink;
}

其实，看到这里，怎么样制作三角形，聪明的大家一眼就看穿了，我的读者真聪明，哈哈哈。

好，上代码

上三角

.triangle{
   width: 0;
   height: 0;
   border-width: 100px;
   border-style: solid;
   border-color: red transparent transparent transparent;
}

其他角的，可以借鉴上面梯形的原理，就是不断地切换 border-color 的 transparent 和其本来的颜色。

写完手工，大家晚安，我继续去写文章了。