Decorative Shapes
Set content: "" and use borders, transforms, or clip-path on ::before and ::after to create geometric decorations without extra HTML.
CSS
Intermediate
5 min read
Creating Decorative Shapes with Pseudo-Elements
Example
/* Triangle using border trick */
.tooltip::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-bottom-color: #333;
}
/* Diagonal section divider */
.section::after {
content: "";
display: block;
height: 60px;
background: inherit;
clip-path: polygon(0 0, 100% 0, 100% 100%);
} Pro Tip
The CSS triangle technique uses transparent borders on three sides and a colored border on one side.