伪类的使用

Posted on 2017-04-26 19:09  Tokyomylove  阅读(100)  评论(0)  编辑  收藏  举报 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>带三角形的方框</title>
    <style>
    .test {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, .15);
    }
    
    .test:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #cccccc;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: -7px;
        left: 6px;
    }
    
    .test:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #fff;
        position: absolute;
        top: -6px;
        left: 7px;
    }
    </style>
</head>

<body>
    <div class="test"></div>
</body>

</html>