Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.