空心三角形指示箭头

Posted 2020-10-08 BluesQian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了空心三角形指示箭头相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>空心三角形指示箭头</title>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 100px;
            border: 6px solid #555;
            border-radius: 20px;
            margin: 100px auto;
            background-color: #8a98ff;
        }

        /*第一个三角形*/
        .box::before{  /*这里的伪元素用单冒号和双冒号都一样*/
            content: \'\';
            display: block;
            position: absolute;
            top: -26px;
            left: 80px;
            border-left: 20px solid transparent ;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #555;
        }

        /*第二个三角形*/
        .box::after{
            content: \'\';
            display: block;
            position: absolute;
            top: -17.6px; /*向下偏移量是矩形边框宽度的1.4（根号2）倍，即8.4，top值为-26-（-8.4）*/
            left: 80px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #8a98ff;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

以上是关于空心三角形指示箭头的主要内容，如果未能解决你的问题，请参考以下文章