纯CSS画带边框的三角形

Html5+Css3 helloweb 次浏览 已收录 评论() 扫描二维码
扫描二维码

示例一:

<!DOCTYPE html>
<html>
<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>
</div>

</body>
</html>

效果如下图:

jp1.png

示例二:

<!DOCTYPE html>
<html>
<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>
</div>

</body>
</html>

效果如下图:

微信截图_20210219142226.png

原文链接:HelloWeb前端网 » 纯CSS画带边框的三角形 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享