ฟังก์ชัน CSS polygon()

การกำหนดและการใช้งาน

CSS polygon() ฟังก์ชันใช้เพื่อกำหนดรูปสี่เหลี่ยม

polygon() ฟังก์ชันกับ clip-path คุณสมบัติและ shape-outside ใช้คุณสมบัติร่วมกัน

ตัวอย่าง

ตัวอย่าง 1

ตัดรูปภาพเป็นรูปสี่เหลี่ยม

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

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ตัดรูปภาพเป็นรูปสี่เหลี่ยม

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

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ใช้ polygon()、clip-path และ 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%);
}

ทดลองด้วยตัวเอง

ภาษา CSS

polygon(fill-rule, length-percentage)
ค่า คำอธิบาย
fill-rule

ตัวเลือก กำหนดกฎการเติมพื้นที่ ซึ่งอาจเป็น nonzero หรือ evenodd

ค่าเริ่มต้นเป็น nonzero
length-percentage

จำเป็น กำหนดจุดที่ใช้ในการเขียนรูปสี่เหลี่ยม ซึ่งน่าจะเป็นความยาวหรืออัตราส่วนเปอร์เซ็นต์

จุดทุกจุดเป็นคู่จุด x และ y สำหรับเมื่อเรียกใช้ 0 0 จะเป็นมุมบนซ้าย 100% 100% จะเป็นมุมล่างขวา

รายละเอียดเทคนิค

รุ่น: CSS Shape Module Level 1

การสนับสนุนเบราญี่ว

ตัวเลขในตารางนี้แสดงรุ่นเบราญี่วที่สนับสนุนฟังก์ชันนี้เต็มที่。

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

หน้าที่เกี่ยวข้อง

อ้างอิง:clip-path คุณสมบัติ

อ้างอิง:shape-outside คุณสมบัติ

อ้างอิง:ฟังก์ชัน circle()

อ้างอิง:ฟังก์ชัน ellipse()

อ้างอิง:ฟังก์ชัน inset()