html中css使用div绘制三角形

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



注意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设置了不同属性

来看看会得到什么样式吧



如图所示，会有一个正常显示的方框，其外上下左右各有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;
}

方形只剩一条横线

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



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

.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;
}

竟然全变成三角形了，好吧，这是意料之中的事。

咦，这么说的话，我好像想到了怎么去绘制一个三角形角标了

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

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

再来过一遍流程



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

喔喔是喔，让我想想勾股定理

.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怎么来的？

查查根号表

当当当当….



等边三角形来啦！

是不是换个颜色 缩小点就能用啦！