利用CSS偽元素創建帶有三角形的提示框的實作技巧

下面小編就為大家帶來一篇利用CSS偽元素創建帶有三角形的提示框的實作方法。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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

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

XML/HTML Code複製內容到剪貼簿

#

<p class="tooltip-wrapper bottom">    
    <p class="arrow"></p>    
    <p class="content">    
        This is content    
    </p>    
</p>

CSS Code#複製內容到剪貼簿

.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偽元素創建帶三角形的提示框的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多利用CSS偽元素創建帶三角形的提示框的實現技巧相關文章請關注PHP中文網！