CSS clip-path Olusturucu
Noktalari surukleyerek sekil olusturun; cokgen, daire, elips ve inset icin clip-path CSS kodu alin.
Noktalari surukleyin; eklemek icin cift tiklayin ve silmek icin noktaya sag tiklayin (en az 3 nokta).
CSS clip-path Olusturucu hakkında
clip-path ozelligi bir ogenin yalnizca boyandigi alani kirpar ve sayfa yerlesiminde hic bosluk birakmaz; bu yuzden kirpilan bolgeler pointer-events ayarlanmadikca tiklama ve hover almaya devam eder. Bu arac ile cokgen noktalarini dogrudan onizleme uzerinde surukler ve cokgen, daire, elips ve inset icin tam clip-path kodunu alirsiniz. Tum degerler ogenin kendi boyutuna gore yuzde olarak uretilir, boylece sekil duyarli kalir.
CSS clip-path Olusturucu nasıl kullanılır
- 1
Bir mod secin: cokgen, daire, elips veya inset; ya da yildiz veya konusma balonu gibi hazir bir sekil yukleyin.
- 2
Sekli istediginiz gibi ayarlamak icin tutamaklari onizleme uzerinde surukleyin.
- 3
Cokgen modunda nokta eklemek icin cift tiklayin, silmek icin tutamaga sag tiklayin.
- 4
Isterseniz kendi resminizi yukleyin, boylece kirpmayi gercek icerik uzerinde gorursunuz.
- 5
clip-path kodunu kopyalayip ogenizin CSS koduna yapistirin.
Sıkça sorulan sorular
clip-path ile overflow: hidden arasindaki fark nedir?
overflow icerigi yalnizca bir dikdortgene kirpabilir, oysa clip-path cokgen, daire veya elips gibi her geometrik yolu kabul eder ve disarida kalan alan tamamen saydam olur; buna karsilik clip-path kaydirmayi overflow gibi kirpmaz.
Kirpilan ogede box-shadow neden kayboluyor?
clip-path golgeyi de oge ile birlikte keser. Kirpilan kenari izleyen bir golge icin box-shadow yerine oge veya ust ogesi uzerinde filter: drop-shadow() kullanin.
clip-path animasyonlu olabilir mi?
Evet, ancak yalnizca sekil turu ve nokta sayisi iki durum arasinda ayni kaldiginda; ayni sayida noktaya sahip iki cokgen arasinda gecis yapabilirsiniz ama daireyi cokgene donusturmek veya nokta sayisini degistirmek animasyonlu olmaz.
Yuzde degerleri neye gore hesaplanir?
Sayfaya veya goruntu alanina degil, ogenin kendi border-box degerine gore cozulur. circle() icin yuzde yaricap, ogenin boyutundan turetilen bir referans capa baglidir; bu nedenle bu onizleme kareyi kullanir ki daire dogru gorunsun.