如果使用前端技術(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)效果如圖所示：
