Menu

Beta
Sign in
Beta
Notched Edge SVG element, flat

Notched Edge SVG element, flat

A single rectangular notch cuts down into the centre of an otherwise straight top edge. Use it to divide dashboard panels or separate sections of a printable form.

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/Nn17eMhc78Ig/amnt.svg" alt="Notched 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 30 H520 V75 H680 V30 H1200 V120 H0 Z"/></svg>
CSS background-image
.notched-edge {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Nn17eMhc78Ig/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.notched-edge {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/Nn17eMhc78Ig/amnt.svg") center / contain no-repeat;
}
React
import NotchedEdgeSvg from "./notched-edge.jsx"; // from the React tab above

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

Tags

notchcutoutsection dividershape dividerselementflat

Made with AMNT

AMNT SVG 1.1 drew this from the words Notched Edge: A straight top edge has one rectangular notch cut downward at its centre. 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