Tasarım & CSS

CSS Clip-Path Üretici

Beş şekil modu (polygon / circle / ellipse / inset / path), pointer-capture sürüklenebilir tutamaçlar, grid snap, kenara tıkla-yeni-vertex, 25+ poligon ön ayarı, dört önizleme içerik modu, ayrıca CSS / -webkit / Tailwind arbitrary value / SVG clipPath / HTML demo çıktısı ve hover animasyon parçası.

Poligon hazır biçimler

Karoya tıkla, mevcut köşeler değişir.

Canlı tuval

Köşeleri sürükle. Kenar üzerine tıklayarak yeni köşe ekle.

Tutamacı sürükle. Snap'i geçici geçmek için Shift basılı tut.
Yeni köşe eklemek için poligon kenarına tıkla.

Preview

Önizleme içeriği

Gradient başlangıç

Gradient bitiş

Önizleme boyutu420px

Çerçeve arka planı

Köşeler

Poligon köşelerini sırala, düzenle veya sil.

#X %Y %

Dönüşümler

Üretilen kod

Projenize uygun formatı kopyalayın.

CSS

clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

CSS + prefixes

-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

Tailwind

clip-path-[polygon(30%_0%,_70%_0%,_100%_30%,_100%_70%,_70%_100%,_30%_100%,_0%_70%,_0%_30%)]

SVG <clipPath>

<clipPath id="uxtools-clip" clipPathUnits="objectBoundingBox">
  <polygon points="0.3,0 0.7,0 1,0.3 1,0.7 0.7,1 0.3,1 0,0.7 0,0.3" />
</clipPath>

HTML demo

<style>
  .clipped {
    width: 320px;
    height: 320px;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  }
</style>

<div class="clipped"></div>

Hover animasyonu

İki şekil arasında hover ile geçiş.