前些天在掘金上看到一篇介绍尖角的文章,很有意思，在此记录一下。
知乎评论框
云音乐评论框
如上图，评论或者回复的文本框都有个小尖角，实现方式有多种，下面介绍其中几种。
最简单的方法，使用border：
.bg {
width: 0px;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid grey;
border-left: 10px solid transparent;
}
更高级的方法，使用两个小黑块，这是来自网易云的技巧：
<div>
<span>
<i class="bg">◆</i>
<i class="bd">◆</i>
</span>
</div>
div {
position: relative;
}
i {
position: absolute;
font-style: normal;
}
.bg {
color: black;
}
.bd {
left: 1px;
color: white;
}
具体原理：固定方块1，平移方块2，使得方块2左端距离方块1左端1px。
如图：
图1
图2
再将方块2颜色换成白色即可，最后会形成一个类似<的图案，就是我们想要的结果啦~
到这里一切看起来还都很简单，直到...
呃，上面这个图怎么实现呢？
具体原理是，用我们最开始介绍的方法，先实现一个黑色尖角，再用一个小一号的白色尖角覆盖它，也就是说，用大尖角包含小尖角，来去掉黑色，其中要用到伪元素的知识。
#demo {
position: relative;
width: 100px;
height: 100px;
background: #fff;
border: 2px #000 solid;
}
#demo::before {
position: absolute;
left: 100%;
width: 0px;
height: 0px;
content: "";
top: 20px;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
}
#demo::after {
position: absolute;
left: 100%;
width: 0px;
height: 0px;
content: "";
top: 22px;
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid white;
}
以上便是用css实现尖角的方法了，完~。
