clip-path ile özel şekiller, eğimli bölümler ve görsel kesimler.
clip-path bir elementin görünen alanını geometrik şekillerle kırpar. Dikdörtgen dışında her türlü şekil yapılabilir.
Koordinatlar yüzde veya px cinsinden verilir. Sol üst (0 0), sağ üst (100% 0), sağ alt (100% 100%), sol alt (0 100%) temel köşelerdir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<style>
body { font-family: sans-serif; padding: 24px; }
.sekil-grid { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.sekil {
width: 120px; height: 120px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: white; font-weight: bold; text-align: center;
}
/* Şekiller */
.ucgen { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.ters-ucgen { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }
.elmas { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.yildiz { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.oklucgen{ clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%); }
.daire { clip-path: circle(50% at 50% 50%); }
.elips { clip-path: ellipse(60% 40% at 50% 50%); }
/* Eğimli bölüm */
.egimli-bolum {
background: #6366f1;
color: white;
padding: 80px 40px;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
margin-bottom: -40px;
text-align: center;
}
.sonraki-bolum {
background: white;
padding: 80px 40px 40px;
text-align: center;
border: 1px solid #e2e8f0;
}
</style>
</head>
<body>
<h3>clip-path Şekilleri</h3>
<div class="sekil-grid">
<div class="sekil ucgen">polygon<br>üçgen</div>
<div class="sekil ters-ucgen">polygon<br>ters üçgen</div>
<div class="sekil elmas">polygon<br>elmas</div>
<div class="sekil yildiz">polygon<br>yıldız</div>
<div class="sekil oklucgen">polygon<br>oklugon</div>
<div class="sekil daire">circle()</div>
<div class="sekil elips">ellipse()</div>
</div>
<h3>Eğimli Bölüm Geçişi</h3>
<div class="egimli-bolum">
<h2>Hero Bölümü</h2>
<p>clip-path ile eğimli alt kenar</p>
</div>
<div class="sonraki-bolum">
<p>Bir sonraki bölüm — kesme noktası sayesinde akıcı geçiş</p>
</div>
</body>
</html>