css斜角气泡 |css 所有字体样式

.box {
position: relative;
display: inline-block;
padding: 10px;
background-color: #ccc;
}
.box::before {
content: "";
position: absolute;
top: -20px;
left: -10px;
border: 10px solid transparent;
border-bottom-color: #ccc;
}
.box::after {
content: "";
position: absolute;
top: -18px;
left: -8px;
border: 8px solid transparent;
border-bottom-color: #fff;
}

首先，大家需要一个具有定位属性的元素，用来定位伪元素。这里大家选择用相对定位的`.box`元素。

然后，大家使用`::before`伪元素来创建上方的斜角，通过设置`border`属性来实现，其中`border-bottom-color`属性控制三角形的颜色，这里和`.box`的背景色相同。

接下来，大家使用`::after`伪元素来创建下方的斜角，同样是通过设置`border`属性，不过这里需要使用透明色的边框来遮盖住上方的斜角，`border-bottom-color`属性改为白色即可。

最终的效果如下：