How is an arrow displayed in the demonstration above?
The arrow in the demonstration is created using the :before pseudo-element on an element with the class .demo-arrow. The base box is styled with a background color, padding, and rounded corners, while the arrow is generated above it using pure CSS.
Specifically, the :before pseudo-element creates a triangle by setting the width and height to 0, and applying borders with the border property. Three borders are transparent, and only the bottom border is colored (matching the box's background color), which visually forms a downward-pointing arrow.
The arrow is positioned above the main box by using position: absolute and adjusting margin-top to move it upward. The left: 50% and margin-left: -10px horizontally center the arrow relative to the box.
.demo-arrow {
position: relative;
background: #f4a024;
color: #ffffff;
padding: 4px 20px;
border-radius: 4px;
}
.demo-arrow:before {
position: absolute;
content: "";
display: block;
width: 0;
height: 0;
left: 50% !important;
margin-left: -10px;
margin-top: -22px;
border: 10px solid transparent;
border-bottom: 10px solid #f4a024;
}
<div class="demo-arrow">Demo Arrow</div>