前些天在掘金上看到一篇介紹尖角的文章,很有意思，在此記錄一下。
知乎評論框
云音樂評論框
如上圖，評論或者回復的文本框都有個小尖角，實現方式有多種，下面介紹其中幾種。
最簡單的方法，使用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實現尖角的方法了，完~。
