CSS provides two generated content hooks, ::before and ::after, which function as virtual child nodes attached to a targeted DOM element. Despite their names implying a sibling relationship, the rendering engine injects them directly into the document flow as first and last children, respectively. To activate these hooks, the content property must be explicitly declared, even when assigned an empty string. When combined with absolute positioning, pseudo-elements can extend a component's visual boundaries without altering the underlying HTML markup.

The foundation of the bookmark pattern relies on a geometric rendering trick involving the border property. Borders are composed of four trapezoidal segments that converge at the center of an element's box model. By reducing an element's width and height to zero, the inner and outer edge intersections meet at a single point. Assigning transparent to three border sides and a solid hex value to the remaining side forces the browser to render a single triangle. The triangle always points toward the transparent side opposite the colored border. This technique eliminates dependency on raster images or inline SVGs for simple UI folds.

Component Implementation

The following structure isolates the visual tab from the page layout using relative and absolute positioning. The base container establishes the primary tab area, while ::before generates the left attachment fold and ::after creates a subtle depth shadow at the bottom edge.

<div class="ribbon-marker">Reference</div>

.ribbon-marker {
  position: relative;
  width: 100px;
  height: 32px;
  background: #4a90d9;
  color: #ffffff;
  line-height: 32px;
  text-align: center;
  font-size: 0.85rem;
  box-sizing: border-box;
}

.ribbon-marker::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 0;
  border: 16px solid;
  border-color: transparent #3d78b5 transparent transparent;
}

.ribbon-marker::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -22px;
  border: 11px solid;
  border-color: #2c5a8a transparent transparent transparent;
  border-bottom-width: 0;
  border-left-width: 22px;
}

The ::before rule anchors a triangle to the left boundary by coloring only the right border, creating a seamless fold that mimics a physical ribbon tab. The ::after rule positions a secondary polygon at the bottom-right corner. By zeroing out the bottom border width and extending the left border, the renderer produces a downward-pointing triangle that simulates a folded paper edge. Adjusting the border-width values scales the angular segments independently, allowing precise control over the fold proportions without modifying the parent container's dimensions.