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

Noam Rosenthal

เผยแพร่: 8 เมษายน 2025

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

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

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

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

สร้างฟีเจอร์ธงด้วย 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 ต่อไปนี้จะแปลงแฟล็ก 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 ที่มีความยาวครบทุกช่วง คุณจะเลือกใช้ 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 เท่านั้น ในอนาคต เราตั้งใจที่จะใช้รูปทรงประเภทนี้เพื่อ กำหนดรูปร่างของเส้นขอบขององค์ประกอบ ซึ่งจะช่วยให้แสดงออกในรูปแบบที่ไม่ใช่สี่เหลี่ยมได้มากยิ่งขึ้น