Home
Plugins
Blog
Contact Us

Converters

CSS Clip Path Converter
SVG To CSS Background

Generators

CSS Clip Path Generator
CSS Animation Library
Gradient Text Generator
Gradient Background Generator
Gradient Colors

Calculators

CSS Clamp Calculator
Age Calculator

X: 200Y: 50

content_pastePaste Custom Layout

Geometries Library

Fill / Gradients

Solid:

Transform Inspector

Point x

Point y

1. Combined SVG Tag & Style Box

<svg width="0" height="0" style="position:absolute;">
  <defs>
    <clipPath id="custom-clip" clipPathUnits="objectBoundingBox">
      <polygon points="0.500,0.125 0.125,0.875 0.875,0.875" />
    </clipPath>
  </defs>
</svg>

2. Standard CSS Code (Wrapper)

/* Apply this class to target html layout node element */
.your-element {
  clip-path: url(#custom-clip);
  width: 400px;
  height: 400px;
  background-color: #f472b6;
}

3. Raw Property Value

clip-path: url(#custom-clip);
width: 400px;
height: 400px;
background-color: #f472b6;

1. Combined HTML Injection Block

<svg width="0" height="0" style="position:absolute;">
  <defs>
    <clipPath id="custom-clip" clipPathUnits="objectBoundingBox">
      <polygon points="0.500,0.125 0.125,0.875 0.875,0.875" />
    </clipPath>
  </defs>
</svg>

<div className="[clip-path:url(#custom-clip)] w-[400px] h-[400px] bg-pink-400">
</div>

2. Tailwind CSS Component Node

<div className="[clip-path:url(#custom-clip)] w-[400px] h-[400px] bg-pink-400">
</div>

3. Raw Property Value

[clip-path:url(#custom-clip)] w-[400px] h-[400px] bg-pink-400