如果使用前端技術(shù)來實現(xiàn)微信朋友圈頁面的話，其中朋友圈的評論按鈕相信很多人會選擇使用切圖來實現(xiàn)，但使用純CSS實現(xiàn)也不難。
使用純CSS實現(xiàn)，則需要使用偽類、定位以及CSS3中的一些新屬性。
首先，先構(gòu)建評論按鈕的HTML布局：
<div class="reply-btn-container">
<span class="reply-btn"></span>
</div>
然后便是CSS樣式，首先我們設(shè)置包裹span標簽的容器的屬性，假設(shè)它是一個100×100的盒子，其樣式如下：
.reply-btn-container {
width: 100px;
height: 100px;
margin: 0 auto;
text-align: right;
}
我們知道，讓塊級元素水平居中可以設(shè)置margin：0 auto；，行內(nèi)元素水平居中可以設(shè)置text-align： center；。
在這里，設(shè)置margin：0 auto；主要是為了讓盒子在頁面中居中，方便查看，在實際頁面中需要根據(jù)情況來設(shè)置。
而這里的text-align： right；是為了讓span標簽在盒子內(nèi)靠右，畢竟評論按鈕一般位于頁面的右側(cè)。
接下來便是span標簽的樣式：
.reply-btn {
width: 48px;
height: 36px;
background-color: currentColor;
color: #8c99c1;
display: inline-block;
position: relative;
vertical-align: middle;
}
在span標簽的樣式中，由于它是一個行內(nèi)元素，無法獨占一行，所以不能直接設(shè)置寬高，但是這個按鈕必須是要呈現(xiàn)為一個有寬高的矩形，因此，我們設(shè)置它的display屬性為inline-block，這樣雖然它仍然不獨占一行，但可以設(shè)置寬高。
這里還用到了position屬性的relative，也就是相對定位。這里來解釋下position的幾個值有何不同：
relative：相對定位，也就是相對于其正常位置（自己）進行定位，比如此處設(shè)置left：20px，就是相對自己當(dāng)前的位置向左偏移20px。相對定位是不會脫離標準文檔流的，只是視覺上發(fā)生了偏移，還會保持原來的占位。
absolute：絕對定位，是相對于自己最近的那個父元素進行定位（父元素必須設(shè)置相對定位或絕對定位），如若找不到符合條件的父元素，那么將相對于body進行定位。絕對定位是脫離標準文檔流的，父元素容器將得不到絕對定位了的子元素的高度。而且不管是塊級元素還是行內(nèi)元素，絕對定位之后，display屬性為block。
flixd：固定定位，是相對瀏覽器窗口的定位，并且脫離標準文檔流。
這里使用relative是為了讓之后的偽類元素使用absolute。
background-color: currentColor;這個屬性中的currentColor值，currentColor表示“當(dāng)前的標簽所繼承的文字顏色”，換種方式表示就是：currentColor = color的值。
vertical-align: middle;該屬性設(shè)置元素的垂直對齊方式，此處middle為設(shè)置元素在父元素的中部。
此時，按鈕矩形已經(jīng)設(shè)置完畢，接下來，便是按鈕左邊的三角形和內(nèi)部的兩個小圓點了，我們通過CSS偽類來實現(xiàn)，主要是before和after。
before 和 after 顧名思義 其就是附著在元素前后的 偽元素，說他是偽元素的意思就是，元素不是在DOM中生成的，而是在瀏覽器渲染引擎渲染CSS的時候畫上去的，所以你在瀏覽器查看元素上是看不到偽元素的HTML結(jié)果的。
CSS樣式如下：
.reply-btn::before {
content: "";
width: 0;
height: 0;
border: 3px solid currentColor;
border-color: transparent currentColor transparent currentColor;
border-width: 4px 6px 4px 0;
position: absolute;
top: 14px;
left: -6px;
}
.reply-btn::after {
content: "";
width: 6px;
height: 6px;
background: #fff;
position: absolute;
top: 13px;
left: 10px;
border-radius: 25%;
box-shadow: 22px 0 0 #fff;
transform: translate(0, 50%);
}
其中transform屬性是向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進行旋轉(zhuǎn)、縮放、移動或傾斜。
在評論按鈕中的另一個小圓點，是設(shè)置第一個小圓點的box-shadow屬性，也就是陰影來實現(xiàn)的。
最后呈現(xiàn)效果如圖所示：
