首页 > 其他分享> > 纯CSS画三角形（带边框）

纯CSS画三角形（带边框）

2019-06-20 22:01:23 作者：互联网

实例一：

<!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>

实现的效果如下图：
在这里插入图片描述

实例二：

<!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>

实现的效果如下图：
在这里插入图片描述

标签：solid,top,边框,8px,三角形,0px,border,transparent,CSS
来源： https://www.cnblogs.com/superfeeling/p/11061631.html