如何僅使用 CSS3 建立透明的半圓切口？

使用CSS3 建立透明半圓切口

實現所需的透明半圓形狀，其中所有元素保持黑色或透明，可以採用利用CSS ::after 偽屬性的技術。

技巧在於黑色長方形的巧妙組合和一個圓圈。此矩形作為基礎，提供黑色背景。在此之上，使用溢出屬性將圓絕對定位並部分隱藏。

此技術的關鍵是添加到圓中的 ::after 偽元素。將其寬度和高度設為 100px，形成一個完美的半圓。應用了 40px 厚的邊框，但背景保持透明。

透過調整 ::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);
}

<div class="rect">
  <span class="circle"></span>
</div>

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