Implementation techniques for using CSS pseudo-elements to create a tooltip with a triangle

高洛峰
Release: 2017-03-07 11:40:55
Original
1779 people have browsed it

The following editor will bring you an implementation method of using CSS pseudo-elements to create a prompt box with a triangle. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

CSS pseudo-elements are very useful. They provide a way to implement some common functions without redundant DOM elements. Let’s use it to implement a tooltip with a triangle.

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

XML/HTML CodeCopy content to clipboard

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

##CSS CodeCopy 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;    
}
Copy after login

The above method of using CSS pseudo-elements to create a prompt box with a triangle is all the content shared by the editor. I hope it can give you a reference, and I hope you will support the PHP Chinese website.

For more implementation techniques on using CSS pseudo-elements to create a prompt box with a triangle, please pay attention to the PHP Chinese website for related articles!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template