纯CSS画三角形（带边框）【转】

蔚落 2022-11-30 12:37 184阅读 0赞

实例一：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</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>

实现的效果如下图：

![在这里插入图片描述][70]

实例二：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .find-div-body{
            position: relative;
            top:30px;
            left: 100px;
            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: 23px;;
            left: -16px;
            padding:0;
            border-right: 8px solid #FFFFFF;
            border-top:8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left:8px solid transparent;
            display: block;
            content:'';
            z-index: 12;
        }
        .find-div-body:after{
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            top: 22px;;
            left: -18px;
            padding:0;
            border-right: 9px solid #cccccc;
            border-top:9px solid transparent;
            border-bottom:9px solid transparent;
            border-left:9px solid transparent;
            display: block;
            content:'';
            z-index:10
        }
    </style>
    <body>
        <div class="find-div-body">
    </div>
    
    </body>
    </html>

实现的效果如下图：

![在这里插入图片描述][70 1]

转自：[https://www.cnblogs.com/superfeeling/p/11061631.html][https_www.cnblogs.com_superfeeling_p_11061631.html]

作者：[静以修身俭以养德][Link 1]

[70]: /images/20221123/739bc3b859c74940a50b7ec65550291f.png
[70 1]: /images/20221123/8a8944686f8149778fac035ffeff7c43.png
[https_www.cnblogs.com_superfeeling_p_11061631.html]: https://www.cnblogs.com/superfeeling/p/11061631.html
[Link 1]: https://home.cnblogs.com/u/superfeeling/