Menu

Beta
Sign in
Beta
Diagonal Cut SVG element, flat

Diagonal Cut SVG element, flat

A straight edge slopes downward from left to right across the filled area. Use it to separate blocks on a product page or divide sections of a report cover.

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/x6a70kQwzMOW/amnt.svg" alt="Diagonal Cut" 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 L1200 100 L1200 120 L0 120 Z"/></svg>
CSS background-image
.diagonal-cut {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/x6a70kQwzMOW/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.diagonal-cut {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/x6a70kQwzMOW/amnt.svg") center / contain no-repeat;
}
React
import DiagonalCutSvg from "./diagonal-cut.jsx"; // from the React tab above

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

Tags

diagonalsloped edgesection dividershape dividerselementflat

Made with AMNT

AMNT SVG 1.1 drew this from the words Diagonal Cut: One straight edge slopes from high on the left to low on 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