CSS clip-path Şekil Üretici

Nasıl çalışır?

Sol panele dolgu rengini yazın — HEX, RGB ve HSL yazımlarının üçü de tanınır — ve listeden bir şekil seçin; kod ile önizleme her değişiklikte yenilenir. Örneğin altıgeni seçtiğinizde polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) üretilir: altı köşe noktası, kutunun yüzdesi olarak sıralanır. Koordinatlar yüzde olduğu için aynı kod 40 piksellik rozette de 400 piksellik afişte de aynı şekli verir; kodun içindeki aspect-ratio: 1 / 1 satırı kutuyu kare tutar, onu silerseniz şekil kutunun oranına göre yayılır. Kodu kopyalayıp kendi seçicinize yapıştırın; background satırı demo dolgusudur, kendi görselinizi kırpmak için o satırı silip aynı öğeye background-image verebilir ya da doğrudan img etiketine clip-path yazabilirsiniz. İndir düğmesi önizlemenin 1200×800 piksellik PNG halini kaydeder.

Bu araç css clip path generator, clip path polygon, css shape generator aramalarıyla da biliniyor.

clip-path nedir?

clip-path, bir öğenin hangi bölgesinin boyanacağını belirleyen CSS özelliğidir: tanımladığınız yolun içi görünür, dışı tamamen saydam olur. Yol dört yazımla kurulabilir — polygon() köşe listesiyle, circle() ve ellipse() eğriyle, inset() içe çekilmiş dikdörtgenle. Kırpma yalnız görüntüyü etkiler; öğenin sayfadaki yeri, boyutu ve içeriği değişmez. Fotoğraf köşesi kesmek, rozet ve şerit yapmak, görseli geometrik çerçeveye oturtmak en yaygın işleridir ve hepsi görsel dosyası düzenlemeden, tek satır CSS ile olur.

polygon() koordinatları nedir?

polygon(), çokgeni köşe noktalarıyla tanımlayan clip-path yazımıdır: her nokta "soldan uzaklık, üstten uzaklık" çiftidir ve virgülle ayrılır. Değerler çoğunlukla yüzde yazılır, çünkü yüzde kutuya göre ölçeklenir — aynı yıldız kodu küçük simgede de tam ekran afişte de çalışır; piksel yazarsanız şekil sabit ölçüde kalır ve kutu büyüyünce köşede kalır. Noktalar saat yönünde art arda birleştirilir; sıra karışırsa kenarlar birbirini keser ve şekil beklenmedik parçalara bölünür.

clip-path ile overflow: hidden arasındaki fark nedir?

overflow: hidden yalnız dikdörtgen kırpar: kutudan taşan içerik gizlenir ama kutunun biçimi köşeleri yuvarlatılmış dikdörtgenden öteye geçemez. clip-path ise kutuyu istediğiniz geometrik yola göre keser — yıldız, altıgen, ok, serbest çokgen — ve bunu içeriği taşırmadan, öğenin kendisini biçimlendirerek yapar. İkisi farklı soruları cevaplar: "taşan kısmı gizle" diyorsanız overflow yeterlidir ve daha ucuzdur; "öğe dikdörtgen olmasın" diyorsanız tek yol clip-path'tir. İkisi birlikte de kullanılabilir: dışta overflow ile kaydırma denetimi, içte clip-path ile şekil.

Kırpma tuzağı: görünmeyen alan yer kaplamaya devam eder

clip-path yalnız boyamayı kırpar, kutunun kendisini küçültmez: üçgene kırpılmış bir öğe, sayfa düzeninde hâlâ tam dikdörtgeninin yerini tutar ve komşu öğeler o boş görünen köşelere yaklaşmaz. Tıklama alanı ise çoğu tarayıcıda kırpılmış şekli izler — kullanıcı köşedeki boşluğa tıkladığında öğe tepki vermez, bu bir hata değil özelliğin tanımıdır.

İkinci sık sürpriz gölgedir: box-shadow kutunun dikdörtgenine çizilir ve kırpma onu da keser, bu yüzden kırpılmış şeklin altında gölge görünmez. Gölge gerekiyorsa clip-path'i bir sarmalayıcı öğeye değil içteki öğeye verip filter: drop-shadow() kullanın; drop-shadow boyanan şekli izlediği için yıldızın gerçek kenarına gölge düşürür.

Yüzde koordinatlar nasıl okunur, şekil nasıl değişir?

polygon() içindeki her çift bir köşe noktasıdır: ilk sayı soldan, ikinci sayı üstten uzaklıktır ve 0% ile 100% kutunun kenarlarıdır. Noktalar yazıldıkları sırayla çizgiyle birleşir, son nokta ilkine kapanır. Ürettiğiniz kodu başlangıç alıp değerleriyle oynayabilirsiniz: yamuğun üst köşelerini birbirine yaklaştırırsanız üçgene, uzaklaştırırsanız dikdörtgene yaklaşır.

İki şekil arasında geçiş animasyonu da bu koordinatlarla yapılır: transition: clip-path ile iki polygon() değeri arasında yumuşak geçiş, yalnız nokta sayıları eşitse çalışır. Bu araçtaki sekizgen ile kesik köşe ikilisi (ikisi de 8 nokta) bu yüzden birbirine sorunsuz dönüşür; altıgenden yıldıza geçiş ise atlamalı olur.

Sık sorulanlar

Kırptığım şeklin içine fotoğraf koyabilir miyim?

Evet, clip-path'in asıl işi budur: kod herhangi bir öğeye uygulanır, img etiketine yazarsanız fotoğrafın kendisi o şekle kırpılır. Üretilen koddaki background satırı yalnız demo dolgusudur; kendi görselinizde o satırı silin, clip-path satırını görsel öğenize taşıyın. Şeklin bozulmaması için aspect-ratio satırını da birlikte taşımayı unutmayın.

Daire ve elips neden polygon() kullanmıyor?

Eğri kenar, köşe noktalarıyla ancak yaklaşık çizilebilir; onlarca nokta gerekir ve kenar yine hafif köşeli kalır. clip-path'in bunun için ayrı yazımları vardır: circle(50% at 50% 50%) merkezden yarıçapla, ellipse(50% 35% at 50% 50%) iki yarıçapla tanımlar. İkisi de matematiksel eğri olduğundan her boyutta pürüzsüzdür; bu araç iki şekilde otomatik olarak doğru yazımı seçer.

Şekil bazı tarayıcılarda görünmezse ne olur?

clip-path'i tanımayan çok eski bir tarayıcı özelliği yok sayar: öğe kırpılmadan, tam dikdörtgen olarak görünür — içerik kaybolmaz, yalnız şekil süsü gider. Bugünkü Chrome, Firefox, Safari ve Edge sürümlerinin hepsi polygon, circle ve ellipse yazımlarını öneksiz destekler; yalnız yıllardır güncellenmemiş Safari sürümleri -webkit-clip-path öneki ister.

Şeklin kenarına çerçeve (border) çizebilir miyim?

Doğrudan çizemezsiniz: border kutunun dikdörtgenine aittir ve kırpma onu da şekille birlikte keser, geriye yalnız şeklin içinde kalan parçalar kalır. Yaygın çözüm iki katmandır: dış öğeye şekli ve çerçeve rengini verin, içine aynı clip-path'li ama birkaç yüzde küçültülmüş ikinci öğeyi koyun; arada kalan şerit çerçeve gibi görünür.