CSS polygon() fonksiyonu

Tanım ve kullanım

CSS polygon() Fonksiyonları, bir multigon tanımlamak için kullanılır.

polygon() Fonksiyonlar clip-path Özellik ve shape-outside Özellikler birlikte kullanılır.

Örnek

Örnek 1

Görseli多gen olarak kesin:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Kişisel olarak deneyin

Örnek 2

Görseli多gen olarak kesin:

img {
  clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
}

Kişisel olarak deneyin

Örnek 3

Kullanım polygon()veclip-path ve shape-outside:

img {
  float: left;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Kişisel olarak deneyin

CSS dilbilgisi

polygon(fill-rule, length-percentage)
Değer Açıklama
fill-rule

Opsiyonel. Doldurma kuralını belirtin. nonzero veya evenodd olabilir.

Öntanımlı değer nonzero'dur.
length-percentage

Gerekli. Multigonun noktalarını tanımlamak için belirleyin. Bu, uzunluk veya yüzdelik değer olabilir.

Her nokta bir x ve y koordinat çiftidir. 0 0 sol üst köşeyi, 100% 100% sağ alt köşeyi tanımlar.

Teknik ayrıntılar

Sürüm: CSS Shape Module Level 1

Tarayıcı desteği

Tabloda gösterilen rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

İlgili sayfalar

Kaynakça：clip-path özelliği

Kaynakça：shape-outside özelliği

Kaynakça：circle() fonksiyonu

Kaynakça：ellipse() fonksiyonu

Kaynakça：inset() fonksiyonu