รูปทรงที่ซับซ้อน

ภาพรวม

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

การใช้งาน

วิธีใช้รูปร่างที่ซับซ้อนโดยใช้มาสก์ CSS

การใช้ความโปร่งใสจากรูปภาพ

คุณสามารถใช้ความโปร่งใสของรูปภาพเป็นมาสก์ได้ โดยส่วนที่ทึบแสงจะมองเห็นได้และส่วนที่โปร่งใสจะซ่อนอยู่ ซึ่งอาจเป็น PNG, SVG หรือรูปภาพอื่นๆ ที่มีความโปร่งใส หรือรูปภาพจาก Generative AI เช่น การไล่ระดับสี CSS

.shaped-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('mask.svg');
  -webkit-mask-size: cover; /* Scale mask to cover element */
  -webkit-mask-repeat: no-repeat; /* Do not tile the mask */

  /* Standard property for modern browsers */
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

การใช้องค์ประกอบ SVG ใน HTML

นอกจากนี้ คุณยังอ้างอิงองค์ประกอบ <mask> ที่กำหนดไว้ใน SVG ในบรรทัดใน HTML ของหน้าเว็บได้ด้วย ใช้ maskContentUnits="objectBoundingBox" เพื่อให้มาสก์ปรับขนาดโดยอัตโนมัติตามขนาดขององค์ประกอบ ซึ่งจะบอกให้เบราว์เซอร์ตีความพิกัดทั้งหมดภายในมาสก์เป็นเศษส่วนตั้งแต่ 0 ถึง 1 (เช่น 0.5 สำหรับ 50%) แทนที่จะเป็นพิกเซลสัมบูรณ์

ความสว่างเทียบกับการมาสก์อัลฟ่า: โดยค่าเริ่มต้น มาสก์ SVG จะใช้ความสว่างเพื่อกำหนดความทึบแสง โดยสีขาวจะแสดง สีดำจะซ่อน และสีเทาจะสร้างความกึ่งโปร่งใส หากต้องการให้มาสก์ใช้ช่องอัลฟ่า (ความโปร่งใส) ของรูปร่าง SVG แทน คุณสามารถระบุ mask-type: alpha; ใน CSS หรือ mask-type="alpha" โดยตรงในองค์ประกอบ <mask> ของ SVG

<!-- White areas reveal content, gray creates semi-transparency, black or transparent hides it -->
<svg width="0" height="0">
  <defs>
    <!-- objectBoundingBox scales mask coordinates (0 to 1) with the element's size -->
    <mask id="custom-shape" maskContentUnits="objectBoundingBox">
      <!-- Use white shapes to define fully opaque areas -->
      <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      <!-- Use gray shapes to define semi-transparent/faded areas -->
      <circle cx="0.5" cy="0.5" r="0.25" fill="gray" />
    </mask>
  </defs>
</svg>

<div class="masked-content">
  <!-- Content to be masked -->
</div>

<style>
.masked-content {
  /* Reference the SVG mask ID */
  -webkit-mask-image: url(#custom-shape);
  mask-image: url(#custom-shape);
}
</style>

กลยุทธ์สำรอง

หากเบราว์เซอร์ไม่รองรับ mask-image หรือเวอร์ชันที่มีคำนำหน้า ให้ทำดังนี้

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

/* Fallback for browsers that do not support masking */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .shaped-element {
    /* Use a simple rounded rectangle as fallback */
    clip-path: inset(5% round 15px);
  }
}