Simple use of before and after in css

Simple use of before and after in css

Go directly to the code, not to mention it!

Draw triangle

1 ),

<Style type = "text/css">. triangle {width: 0; height: 0;/* border: 50px transparent solid; * // * borders with at least two directions can be formed without this sentence, for example, the following group */border-top: 50px solid black; border-right: 50px solid purple;/* border-bottom: 50px solid blue; border-left: 50px solid red; */} </style>

 

2 ),

<Style type = "text/css">. triangle1 {width: 0; height: 0; border: 50px transparent solid;/* transparent indicates that the border color is transparent, and solid indicates that the border is solid */border-top-color: black; border-bottom-color: black;} </style>

 

3) a prompt box similar to QQ or with a triangle

<style type="text/css">.wechat-triangle{position: relative;width: 150px;height: 36px;border: 1px solid black;border-radius: 5px;background: rgba(245, 245, 245, 1);}/*.wechat-triangle:before{content: "";display: block;position: absolute;top: 8px;width: 0;height: 0;border: 6px transparent solid;left: -12px;border-right-color: rgba(245,245,245,1);}*/.wechat-triangle:before, .wechat-triangle:after{content: "";display: block;position: absolute;top: 8px;width: 0;height: 0;border: 6px transparent solid;}.wechat-triangle:before{left: -11px;border-right-color: rgba(245,245,245,1);z-index: 1;}.wechat-triangle:after{left: -12px;border-right-color: rgba(0,0,0,1);z-index: 0;}.wechat-triangle1{width: 120px;height: 30px;position: relative;border: 1px solid black;border-radius: 5px;background: rgba(245,245,245,1);}.wechat-triangle1:before, .wechat-triangle1:after{content: "";width: 0;height: 0;display: block;position: absolute;top: 5px;border: 4px transparent solid;}.wechat-triangle1:before{left: -8px;border-right-color: rgba(245,245,245,1);z-index: 1;}.wechat-triangle1:after{left: -9px;border-right-color: rgba(0,0,0,1);z-index: 0;}</style>

Rgba consists of color and transparency. The transparency is [0, 1].