纯CSS实现朋友圈评论按钮

如果使用前端技术来实现微信朋友圈页面的话，其中朋友圈的评论按钮相信很多人会选择使用切图来实现，但使用纯CSS实现也不难。

使用纯CSS实现，则需要使用伪类、定位以及CSS3中的一些新属性。

首先，先构建评论按钮的HTML布局：

然后便是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属性，也就是阴影来实现的。

最后呈现效果如图所示：

回复按钮