位置：广州松河 > 技术支持 > CSS 三角形对话框（带边框）- :before + :after + border_CSS学习

CSS 三角形对话框（带边框）- :before + :after + border_CSS学习

来源：网络整理时间：2023/3/4 0:57:15 共 3654 浏览

关于三角形的各种画法，之前在文章《纯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图形必须熟练的选择器！

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery - click点击显示隐藏，同时点击其它空白区域隐藏_js/jQuery | ·下一条：CSS - :focus 选择器 - 点击选择输入框背景颜色变色_CSS学习