CSS 三角形对话框(带边框)- :before + :after + border

老白 1年前 1411浏览 0评论

 纯CSS画三角形(带边框).png CSS 三角形对话框(带边框)- :before + :after + border CSS学习

关于三角形的各种画法,之前在文章《纯CSS - border绘制三角形(各种角度)》内有详细的介绍,今天来讲的是CSS绘出对话框和三角带边框

真正的三角形画法虽然重要,但常用程度甚至不如本文介绍的带边框三角形,因为现在网页需要弹出各种信息,比如二维码,比如联系方式等,都需要用到对话框,这个框如果使用PS做图的话也可行,但很浪费时间,css直接实现的话更靠谱!

如上图所示,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 三角形对话框,三角形(带边框)</title>
</head>
<style>
    .find-div-body{
        position: relative;
        top:30px;
        right:0px;
        width:400px;
        height:200px;
        padding:8px;
        background-color: #FFFFFF;
        border: #cccccc solid 1px;
        border-radius: 3px;
    }
    .find-div-body:before{
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -16px;;
        right:41px;
        padding:0;
        border-bottom:8px solid #FFFFFF;
        border-top:8px solid transparent;
        border-left:8px solid transparent;
        border-right:8px solid transparent;
        display: block;
        content:'';
        z-index: 12;
    }
    .find-div-body:after{
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -18px;;
        right:40px;
        padding:0;
        border-bottom:9px solid #cccccc;
        border-top:9px solid transparent;
        border-left:9px solid transparent;
        border-right:9px solid transparent;
        display: block;
        content:'';
        z-index:10
    }
</style>
<body>
    <div class="find-div-body">
</div>
</body>
</html>

如上图,主要需要用到:after和:before选择器,这也是制作各种CSS图形必须熟练的选择器!

发表评论