如何僅使用 CSS 創建無縫半圓切口？

使用CSS 建立無縫透明剪切圖

僅使用CSS3 在div 中實現透明剪切形狀可能是一項挑戰，尤其是當形狀不是簡單的幾何圖形時。本文提出了一種解決方案，使用 ::after 偽屬性創建無縫的半圓切口，確保所有元素保持黑色或透明。

該方法涉及建立一個黑色矩形，並在其上放置一個透明圓圈它。然而，為了實現所需的剪切效果，圓需要延伸到其邊界之外的透明半徑。這是透過使用帶有大邊框的 ::after 偽元素來創建半圓形形狀來實現的。

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle::after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

此程式碼建立一個黑色矩形，其上半部有一個透明的半圓形切口。 ::after 偽元素在矩形上方放置一個透明圓圈，並應用寬黑色邊框來創建圓形形狀。 ::after 元素的透明背景允許矩形的顏色和周圍的背景顯示出來，從而產生無縫的剪切效果。

以上是如何僅使用 CSS 創建無縫半圓切口？的詳細內容。更多資訊請關注PHP中文網其他相關文章！