ใช้ shape() สำหรับการครอบตัดที่ปรับเปลี่ยนตามพื้นที่โฆษณา

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

Noam Rosenthal

เผยแพร่เมื่อวันที่ 8 เมษายน 2025

พร็อพเพอร์ตี้ clip-path ช่วยให้คุณเปลี่ยนรูปร่างขององค์ประกอบได้โดยการตัดให้เป็นวงกลม รูปหลายเหลี่ยม หรือแม้แต่เส้นทาง SVG แต่ก่อน Chrome 135 และ Safari 18.4 คุณจะต้องเลือกระหว่างรูปหลายเหลี่ยมที่ปรับขนาดได้กับรูปทรงที่ซับซ้อนกว่าซึ่งไม่ปรับขนาดได้โดยใช้เส้นทาง SVG เมื่อใช้ฟังก์ชัน shape() ใหม่ clip-path จะตัดองค์ประกอบเป็นรูปทรงที่ไม่ใช่รูปหลายเหลี่ยมซึ่งปรับเปลี่ยนตามอุปกรณ์ได้ด้วย

สร้างรูปร่างธง

ตัวอย่างเช่น ให้เปรียบเทียบการสร้างรูปร่างธงด้วย clip-path: path() และ clip-path: shape()

รูปทรงธงไม่ใช่รูปหลายเหลี่ยมอย่างแท้จริง เนื่องจากเส้นขอบด้านบนและด้านล่างเป็นเส้นโค้ง CubicBézier ไม่ใช่เส้นตรงหรือมุมมน

สร้างการแจ้งว่าไม่เหมาะสมด้วย clip-path: path()

รูปร่างอย่างธงนี้สามารถแสดงโดยใช้เส้นทาง SVG

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

เส้นทาง SVG คือชุดคำสั่งเส้นทาง ดังนี้

1. ย้ายไปที่ 0, 20
2. โค้งเป็น 100, 20 โดยใช้จุดควบคุม (25,0 และ 75, 40)
3. เส้นแนวตั้งถึง 80
4. โค้งเป็น 0, 80 โดยใช้จุดควบคุม (75,100 และ 25,50)
5. ปิดเส้นทาง (เส้นไปยัง 0,20)

คำสั่งนี้จะวาดรูปทรงธง แต่หน่วยทั้งหมดจะเป็นพิกเซล SVG สามารถปรับขนาดพิกเซลเหล่านั้นเป็นกล่องแสดงผลได้ แต่จะต้องปรับในลักษณะที่ดูเหมือนการปรับขนาดเรขาคณิตของทั้งรูปร่าง

เช่น หากต้องการให้สี่เหลี่ยมผืนผ้าทั้งรูปปรับขนาด แต่คงความสูงและความกว้างของเส้นโค้งไว้ที่ 20 พิกเซล SVG จะไม่เหมาะกับงานดังกล่าว

สร้างการแจ้งว่าไม่เหมาะสมด้วย shape()

เปรียบเทียบผลลัพธ์เดียวกันโดยใช้ shape() ฟังก์ชันรูปร่างยอมรับชุดคำสั่ง ซึ่งคล้ายกับคำสั่งเส้นทาง SVG อย่างไรก็ตาม คำสั่งเหล่านี้ยอมรับความยาวและเปอร์เซ็นต์ CSS ในหน่วย CSS ใดก็ได้

CSS ต่อไปนี้จะแปลง Flag a shape() ด้วยหน่วยเปอร์เซ็นต์

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

ทําให้เนื้อหาตอบสนอง

เมื่อใช้ CSS ความยาวเต็มรูปแบบ คุณสามารถเลือกความยาวที่ต้องการใช้สำหรับพิกัดแต่ละรายการ

เช่น หากต้องการปรับขนาดทั้งหมดของธงตามขนาดขององค์ประกอบ แต่คงความสูงของเส้นโค้งไว้ ให้ทำดังนี้

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

เพิ่มพร็อพเพอร์ตี้และภาพเคลื่อนไหวที่กําหนดเอง

เมื่อกําหนดรูปร่างใน CSS แล้ว คุณจะใช้พร็อพเพอร์ตี้ที่กําหนดเองเพื่อปรับเปลี่ยนความสูงได้อย่างง่ายดาย

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

คุณยังสร้างภาพเคลื่อนไหวของพร็อพเพอร์ตี้ CSS โดยใช้ข้อบ่งชี้ @property และจำกัดขอบเขตไม่ให้เกินขอบเขตได้ด้วย ดังนี้

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

ลองใช้

ใน Chrome 135 หรือ Safari 18.4 คุณจะเห็นรูปร่างธงแบบเคลื่อนไหวที่สร้างโดยใช้ clip-path: shape() ในการสาธิต CodePen นี้

สรุป

clip-path: shape() ช่วยให้คุณตัดองค์ประกอบโดยใช้รูปร่างตามต้องการและที่ปรับเปลี่ยนได้ ซึ่งก่อนหน้านี้ทำได้โดยใช้เทคนิคต่างๆ เช่น ไล่ระดับสีรูปกรวยหรือ SVG ที่สร้างขึ้นจาก JavaScript เท่านั้น

ดูไวยากรณ์ทั้งหมดในข้อกําหนด

ขณะนี้ใช้ได้กับ clip-path เท่านั้น ในอนาคต เราคาดหวังว่าจะใช้รูปร่างประเภทนี้เพื่อกำหนดรูปร่างของเส้นขอบขององค์ประกอบ ซึ่งจะปลดล็อกวิธีแสดงผลที่ไม่ใช่สี่เหลี่ยมผืนผ้าได้มากขึ้น