The implementation technique of using CSS pseudo-elements to create a triangle-shaped cue box

The following small series for everyone to bring a use of CSS pseudo-elements to create a triangle with the implementation of the prompt box. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

CSS pseudo-elements are useful in providing a way to implement some common functionality without the need for extra DOM elements, which are implemented with a triangular ToolTip.

Here is the DOM structure:
The following is the corresponding CSS style:

xml/html Code copy content to clipboard

<p class= "Tooltip-wrapper Bottom" >        <p class= "Arrow" ></p>        <p class= "Content" >            This is content        </p>    </p>

CSS Code copy content to clipboard

. 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;    }

Above the use of CSS pseudo-elements to create a triangle with the hint box is the small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.