css画带边框三角形,纯CSS画三角形（带边框）

实例一：

Title

.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

}

实现的效果如下图：

实例二：

Title

.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

}

实现的效果如下图：

标签：solid,top,边框,8px,三角形,0px,border,transparent,CSS

来源： https://www.cnblogs.com/superfeeling/p/11061631.html