如果使用前端技术来实现微信朋友圈页面的话，其中朋友圈的评论按钮相信很多人会选择使用切图来实现，但使用纯CSS实现也不难。
使用纯CSS实现，则需要使用伪类、定位以及CSS3中的一些新属性。
首先，先构建评论按钮的HTML布局：
<div class="reply-btn-container">
<span class="reply-btn"></span>
</div>
然后便是CSS样式，首先我们设置包裹span标签的容器的属性，假设它是一个100×100的盒子，其样式如下：
.reply-btn-container {
width: 100px;
height: 100px;
margin: 0 auto;
text-align: right;
}
我们知道，让块级元素水平居中可以设置margin：0 auto；，行内元素水平居中可以设置text-align： center；。
在这里，设置margin：0 auto；主要是为了让盒子在页面中居中，方便查看，在实际页面中需要根据情况来设置。
而这里的text-align： right；是为了让span标签在盒子内靠右，毕竟评论按钮一般位于页面的右侧。
接下来便是span标签的样式：
.reply-btn {
width: 48px;
height: 36px;
background-color: currentColor;
color: #8c99c1;
display: inline-block;
position: relative;
vertical-align: middle;
}
在span标签的样式中，由于它是一个行内元素，无法独占一行，所以不能直接设置宽高，但是这个按钮必须是要呈现为一个有宽高的矩形，因此，我们设置它的display属性为inline-block，这样虽然它仍然不独占一行，但可以设置宽高。
这里还用到了position属性的relative，也就是相对定位。这里来解释下position的几个值有何不同：
relative：相对定位，也就是相对于其正常位置（自己）进行定位，比如此处设置left：20px，就是相对自己当前的位置向左偏移20px。相对定位是不会脱离标准文档流的，只是视觉上发生了偏移，还会保持原来的占位。
absolute：绝对定位，是相对于自己最近的那个父元素进行定位（父元素必须设置相对定位或绝对定位），如若找不到符合条件的父元素，那么将相对于body进行定位。绝对定位是脱离标准文档流的，父元素容器将得不到绝对定位了的子元素的高度。而且不管是块级元素还是行内元素，绝对定位之后，display属性为block。
flixd：固定定位，是相对浏览器窗口的定位，并且脱离标准文档流。
这里使用relative是为了让之后的伪类元素使用absolute。
background-color: currentColor;这个属性中的currentColor值，currentColor表示“当前的标签所继承的文字颜色”，换种方式表示就是：currentColor = color的值。
vertical-align: middle;该属性设置元素的垂直对齐方式，此处middle为设置元素在父元素的中部。
此时，按钮矩形已经设置完毕，接下来，便是按钮左边的三角形和内部的两个小圆点了，我们通过CSS伪类来实现，主要是before和after。
before 和 after 顾名思义 其就是附着在元素前后的 伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，所以你在浏览器查看元素上是看不到伪元素的HTML结果的。
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属性是向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
在评论按钮中的另一个小圆点，是设置第一个小圆点的box-shadow属性，也就是阴影来实现的。
最后呈现效果如图所示：
