用css实现尖角

前些天在掘金上看到一篇介绍尖角的文章,很有意思，在此记录一下。

知乎评论框 云音乐评论框

如上图，评论或者回复的文本框都有个小尖角，实现方式有多种，下面介绍其中几种。
最简单的方法，使用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实现尖角的方法了，完~。