The problem
You want to create unique card or button designs with clipped or notched corners.
The solution
/* Single clipped corner */
.clip-corner {
clip-path: polygon(
0 0,
calc(100% - 20px) 0,
100% 20px,
100% 100%,
0 100%
);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 24px;
color: white;
}
/* All corners clipped */
.clip-all-corners {
clip-path: polygon(
20px 0,
calc(100% - 20px) 0,
100% 20px,
100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%,
0 calc(100% - 20px),
0 20px
);
}
/* Notched corners */
.notch-corners {
clip-path: polygon(
0 10px,
10px 0,
calc(100% - 10px) 0,
100% 10px,
100% calc(100% - 10px),
calc(100% - 10px) 100%,
10px 100%,
0 calc(100% - 10px)
);
background: #1a1a2e;
padding: 20px;
}
/* Diagonal cut */
.diagonal-cut {
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 30px),
calc(100% - 30px) 100%,
0 100%
);
}
/* Arrow shape */
.arrow-right {
clip-path: polygon(
0 0,
calc(100% - 20px) 0,
100% 50%,
calc(100% - 20px) 100%,
0 100%
);
background: #3a7bff;
padding: 16px 32px;
}See it live
Put it to work
<!-- Clipped corner card -->
<div class="clip-corner">
<h3>Clipped Corner Design</h3>
<p>Modern card with unique corner cut</p>
</div>
<!-- Button with arrow shape -->
<button class="arrow-right">
Next Step
</button>
<!-- Notched badge -->
<span class="notch-corners">
NEW
</span>Worth knowing
clip-path creates clean geometric shapes. Use polygon() for custom paths. Great for modern UI designs.