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

在Div 中創建透明半圓剪切

問題陳述：

僅使用CSS3在div內實現透明的半圓形形狀剪切，約束條件是所有形成形狀的元素必須是黑色或透明的。

解：

要建立所需的形狀，我們利用 CSS 的 ::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);
}

HTML:

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

此解建立一個包含圓的等邊三角形，被向上擠壓，使得交點形成半圓形。透過將背景屬性設為黑色或透明，我們就達到了想要的效果。

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