弹出框 带边框三角形(css)

152 阅读1分钟

“纵向”指示三角形实例:

代码:

        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     }    
效果:

image.png

“横向”指示三角形实例:

 代码:

        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     }    
**效果图:**

image.png