CSS中怎么利用偽元素創建三角形提示框

這篇文章將為大家詳細講解有關CSS中怎么利用偽元素創建三角形提示框，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

CSS偽元素非常有用，它提供了一種無需多余的DOM元素來實現一些常見的功能的方法，以下利用其實現一個帶三角形的tooltip。

下面是DOM結構：
下面是對應的CSS樣式：

2. <div class="tooltip-wrapper bottom">    
       <div class="arrow"></div>    
       <div class="content">    
           This is content    
       </div>    
   </div>

3. 
   

4. .tooltip-wrapper {    
       position: absolute;    
       z-index: 9999;    
       padding: 5px;    
       background: white;    
       border: 1px solid #7d7d7d;    
       border-radius: 5px;    
   }    
   .tooltip-wrapper .arrow,    
   .tooltip-wrapper .arrow:after {    
       position: absolute;    
       display: block;    
       width: 0;    
       height: 0;    
       border-color: transparent;    
       border-style: solid;    
   }    
   .tooltip-wrapper .arrow {    
       border-width: 11px;    
   }    
   .tooltip-wrapper .arrow:after {    
       content: "";    
       border-width: 10px;    
   }    
   .tooltip-wrapper.bottombottom .arrow {    
       top: -11px;    
       left: 50%;    
       margin-left: -11px;    
       border-top-width: 0;    
       border-bottom-color: #7d7d7d;    
   }    
   .tooltip-wrapper.bottombottom .arrow:after {    
       top: 1px;    
       margin-left: -10px;    
       border-top-width: 0;    
       border-bottom-color: white;    
   }

關于CSS中怎么利用偽元素創建三角形提示框就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。