css小三角符号

使用css实现小三角符号

实现原理：

  1. 采用的是均分原理

    盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部分。

  2. 代码的实现

    第一步 保证元素是块级元素

    第二步 设置元素的边框

    第三步 不需要显示的边框使用透明色

<!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>
posted @ 2022-03-22 09:00  Tqqj  阅读(115)  评论(0)    收藏  举报