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