Menu

Beta
Sign in
Beta
Stepped Edge SVG element, flat

Stepped Edge SVG element, flat

The horizontal top edge drops through three square steps toward the right. Use this divider on a project timeline page or between topics in a technical presentation.

Free · from Shape dividers, flat

Similar SVGs

More from Shape dividers, flat

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/3QryFQQ1s65W/amnt.svg" alt="Stepped Edge" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none" fill="currentColor"><path d="M0 12 H300 V38 H600 V64 H900 V90 H1200 V120 H0 Z"/></svg>
CSS background-image
.stepped-edge {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/3QryFQQ1s65W/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.stepped-edge {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/3QryFQQ1s65W/amnt.svg") center / contain no-repeat;
}
React
import SteppedEdgeSvg from "./stepped-edge.jsx"; // from the React tab above

<SteppedEdgeSvg width={48} height={48} />

Tags

stepsstaircasesection dividershape dividerselementflat

Made with AMNT

AMNT SVG 1.1 drew this from the words Stepped Edge: A horizontal top edge drops through three square steps toward the right. as part of the pack Shape dividers, flat. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings