Shapes

Overview

Position decorative SVG elements (dividers, curves, blurs) at the edges of a section. Always used inside a position-relative parent.

.shape

Base class — sets position: absolute and pointer-events: none.

Combine with a position class, a fluid class, and an SVG child.

<section class="position-relative">
  ...
  <div class="shape shape-bottom shape-fluid-x">
    <svg ...>...</svg>
  </div>
</section>

Position

Anchor the shape to a specific edge of its parent container.

.shape-top .shape-bottom .shape-start .shape-end

Class Description .shape-top Top edge — transform-origin: bottom center .shape-bottom Bottom edge — transform-origin: top center .shape-bottom-100 Above the parent bottom (bottom: 100%) .shape-start Left edge — transform-origin: center right .shape-end Right edge — transform-origin: center left

.shape-bottom Live demo

Section content

<section class="position-relative">
  ...
  <div class="shape shape-bottom shape-fluid-x">
    <svg width="1440" height="48" viewBox="0 0 1440 48" fill="none">
      <path d="M0 48H1440V0C722.5 52 0 0 0 0V48Z" fill="var(--bs-primary)"></path>
    </svg>
  </div>
</section>

.shape-top Live demo

Section content

<div class="shape shape-top shape-fluid-x">
  <svg ...>...</svg>
</div>

Fluid Sizing

Stretch the SVG to fill the parent width or height.

.shape-fluid-x .shape-fluid-y

Class Description .shape-fluid-x SVG child: width: 100%; height: auto — for horizontal dividers .shape-fluid-y SVG child: width: auto; height: 100% — for vertical/side shapes

// horizontal divider (top/bottom)
<div class="shape shape-bottom shape-fluid-x">...</div>

// vertical shape (start/end)
<div class="shape shape-end shape-fluid-y">...</div>

Flip

Mirror shapes along X, Y, or both axes to reuse a single SVG in multiple orientations.

.shape-flip-x .shape-flip-y .shape-flip-xy

Class Description .shape-flip-x scaleX(-1) — horizontal mirror .shape-flip-y scaleY(-1) — vertical mirror .shape-flip-xy scale(-1, -1) — both axes

.shape-flip-xy Same SVG, flipped for top position

Section content

// reuse a bottom divider at the top by flipping both axes
<div class="shape shape-top shape-fluid-x shape-flip-xy z-1">
  <svg ...>...</svg>
</div>

Common SVG Shapes

Ready-to-use SVG paths. Fill with var(--bs-body-bg) or any CSS color to match the adjacent section.

Curve divider

Curve

<svg width="1440" height="48" viewBox="0 0 1440 48" fill="none">
  <path d="M0 48H1440V0C722.5 52 0 0 0 0V48Z"
        fill="var(--bs-primary)"></path>
</svg>

Angle divider

Angle

<svg width="1440" height="100" preserveAspectRatio="none" viewBox="0 0 1440 150" fill="none">
  <path d="M0 125L1440 0V150H0V125Z"
        fill="var(--bs-primary)"></path>
</svg>

Usage Tips

Best practices for working with shapes.

Tips

Parent must be relative — the shape is position: absolute, so wrap your section in position-relative (or use a <section> which handles it naturally).

Fill color — use fill="var(--bs-primary)" to match the adjacent section background. Change the variable for colored backgrounds.

Z-index — add .z-1 if the shape needs to sit above adjacent content.

Overlap fix — position classes use -1px offset to prevent subpixel gaps between the shape and the section edge.

Theme-aware — add data-bs-theme="dark" on the shape wrapper if the adjacent section uses a different theme, so var(--bs-body-bg) resolves correctly.

// shape inherits theme from adjacent section
<div class="shape shape-bottom shape-fluid-x z-1" data-bs-theme="dark">
  <svg ...>
    <path fill="var(--bs-primary)"></path>
  </svg>
</div>

On this page