Shaped Cards

Combine inset and polygon clips on real content cards. Keep text inside the visible region.

Checkpoint set

.card-slant { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }

Slant panel

Text sits inside the visible polygon.

Rounded inset

inset with round corners.

Tag edge

Polygon cut on the right.

Check that headings and sentences remain fully visible.
One shape per card keeps the lesson clear.

Important HTML

Card content must stay inside the visible region.

<article class="shaped-card card-slant">
  <h3>…</h3>
  <p>…</p>
</article>

Important CSS

Polygons and inset shape content cards.

.card-slant {
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
.card-ticket {
  clip-path: inset(0 0 0 0 round 18px);
}