css小三角符号
使用css实现小三角符号
实现原理:
-
采用的是均分原理
盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部分。
-
代码的实现
第一步 保证元素是块级元素
第二步 设置元素的边框
第三步 不需要显示的边框使用透明色
<!DOCTYPE html>
<html lang="en">
<style>
.demo:after{
content: '';
display: inline-block;
width: 0;
height: 0;
border: 8px solid transparent;
border-left: 8px solid #AFABAB;
position: relative;
top: 2px;
left: 10px;
}
</style>
<body>
<div class="demo">这是一个测试</div>
</body>
</html>