html中css使用div绘制三角形

在很多网页中经常会有三角形角标作为导航指示器使用，比如sketch官网就有如下图

角标实例.png

注意licensing前面的三角形角标，那么他是如何实现的呢，让我们一起来探索下吧！

对于一个常规的div框而言，给其设置正常宽高，并设置border

.div__custom{    position:relative;    width: 32px;    height: 32px;    border-top:32px solid red;    border-bottom: 32px solid black;    border-left:32px solid yellow;    border-right:32px solid blue;
}

为了方便展示，这里的border设置了不同属性
来看看会得到什么样式吧

常规.png

如图所示，会有一个正常显示的方框，其外上下左右各有border，而对于每一个角所多出的则由相邻两个border平分
那么，如果我们把div设置成高度为0会怎么样呢？

.div__no__height{    position:relative;    width: 32px;    height: 0px;    border-top:32px solid red;    border-bottom: 32px solid black;    border-left:32px solid yellow;    border-right:32px solid blue;
}

无高度.png

方形只剩一条横线
同理，如果设置width为0，height仍为32px，那么会发现这个div框神奇得被拉高啦，变瘦啦

无宽度.png

细思一下，如果没有宽高会怎么样，哇 世界上会存在一个没有尺寸的物体吗？

.div__neither {    position:relative;    width: 0px;    height: 0px;    border-top:32px solid red;    border-bottom: 32px solid black;    border-left:32px solid yellow;    border-right:32px solid blue; 
}

神奇物体.png

竟然全变成三角形了，好吧，这是意料之中的事。
咦，这么说的话，我好像想到了怎么去绘制一个三角形角标了

.div__triangle {
    position:relative;
    width: 0px;
    height: 0px;
    border-top: 32px solid transparent;  
    border-bottom: 32px solid transparent; //设置上边框和下边框为透明
    border-left:32px solid yellow;
}

三角形.png

设置上方和下方的border为透明，左边的仍然留着就会发现，三角形已经出来啦，当然，不止这一种，其他的留待慢慢尝试

再来过一遍流程

流程.png

哎，这个三角形好像和我们想象中的不一样，喔 对了好像我们要的是等边三角形对吧
喔喔是喔，让我想想勾股定理

.div__triangle__beautiful {    position:relative;    width: 0px;    height: 0px;    border-top: 32px solid transparent;    border-bottom: 32px solid transparent;    border-left:55.36px solid yellow;
}

55.36怎么来的？
就是32*1.732
1.732怎么来的？
查查根号表
当当当当....

等边三角形.png

等边三角形来啦！
是不是换个颜色 缩小点就能用啦！

作者：mattmatt
链接：https://www.jianshu.com/p/08324bc7a2a9