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

使用CSS的透明半圓切口

儘管沒有帶有白色圓圈的黑色矩形，但可以創建一個透明的半圓-僅使用CSS3 的圓形切口。關鍵在於明智地使用 ::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);
}

在這段程式碼中，.rect 元素表示主要形狀，而 .circle 及其 ::after 偽元素一起形成了切口。 ::after 元素創造一個位於 .circle 元素後面的半圓形形狀，從而產生半圓形切口的錯覺。 ::after 元素的透明背景可以讓背景顏色透過，達到想要的效果。

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