Diagonal Cut SVG element, flat

Free

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.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

diagonal sloped edge section divider shape dividers element flat

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} />

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.

Rest of Shape dividers, flat

Whole pack

Similar SVGs

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