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 @   Tqqj  阅读(95)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)

阅读目录(Content)

此页目录为空

点击右上角即可分享
微信分享提示