How to realize the tooltips effect with small Triangle in div+css style
In this article Xiaobian introduces in detail "div+css style how to achieve tooltips effect with small triangle", the content is detailed, the steps are clear, and the details are handled properly. I hope this "div+css style how to achieve tooltips effect with small triangle" article can help you solve your doubts.
The code is as follows:
Tooltips {position: relative; width: 300px; height: 80px; line-height: 60px; background: # D7E7FC; border-radius: 4px;} .arrow {position: absolute; color: # D7E7FC Width: 0px; height: 0px; line-height: 0px; border-width: 20px 15px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent; bottom:-20px; right: 50% Tooltips {position: relative; width: 300px; height: 80px; line-height: 60px; background: # D7E7FC; border: 1px solid # A5C4EC; border-radius: 4px } .arrow {position: absolute; width: 0px; height: 0px; line-height: 0px; border-width: 20px 15px 0; border-style: solid dashed dashed dashed; border-left-color: transparent; border-right-color: transparent }. Arrow-border {color: # A5C4EC; bottom:-20px; right: 50%;}. Arrow-bg {color: # D7E7FC; bottom:-19px; right: 50%;}
Effect display diagram
Read here, this "div+css style how to achieve the tooltips effect with small triangle" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.
