“纵向”指示三角形实例:
代码:
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 }