本文介绍如何使用纯CSS技术来创建空心和实心三角形的方法。通过巧妙利用伪元素及边框特性，可以轻松实现不同样式三角形的绘制。
空心三角形
html：
<span class="square"></span>
css :
实心三角形
html：
<span class="square"></span>
css :
.square:after {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-top: 1px solid #656565;
border-right: 1px solid #656565;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
实心三角形
.squarea:after{
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid red;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
