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>