fungsi polygon() CSS

definisi dan penggunaan

CSS polygon() fungsi digunakan untuk mendefinisikan poligon.

polygon() fungsi dengan clip-path properti dan shape-outside Gunakan properti bersamaan.

contoh

contoh 1

Memotong gambar menjadi poligon:

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

Coba sendiri

contoh 2

Memotong gambar menjadi poligon:

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

Coba sendiri

contoh 3

guna polygon()、clip-path dan 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%);
}

Coba sendiri

syntaks CSS

polygon(fill-rule, length-percentage)
nilai deskripsi
fill-rule

opsional. Tentukan aturan pengisi. Ini dapat berupa nonzero atau evenodd.

nilai standar adalah nonzero.
length-percentage

diperlukan. Tentukan titik yang menentukan poligon. Ini dapat berupa panjang atau persen.

Setiap titik adalah pasangan koordinat x dan y. 0 0 menandai pojok kiri atas, 100% 100% menandai pojok kanan bawah.

detil teknis

versi: Modul CSS Shape Level 1

dukungan browser

angka di tabel menunjukkan versi browser yang pertama kali mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

halaman yang berhubungan

Referensi：properti clip-path

Referensi：properti shape-outside

Referensi：Fungsi circle()

Referensi：Fungsi ellipse()

Referensi：Fungsi inset()