html - 使用一个元素在它后面的元素中创建一个“窗口”

Question

我正在尝试使用 HTML 和 CSS 实现一种效果，在其中我可以定义一个区域，该区域有点像元素中的窗口。我不能只在前面放一个白色 div，因为我希望窗口可以显示元素后面的内容，就像在这个例子中一样，在橙色元素上切了一个洞来显示后面的内容。这完全可能使用 HTML 和 CSS 吗？

标签： htmlcsstransparency

Answer 1

您可以使用 CSS 边框来执行此操作：

body {
  background-color: black;
}
.mask {
  width: 150px;
  height: 150px;
  border: 50px solid orange;
  border-radius: 20px;
  margin: 200px auto;
  border-left-width: 200px;
  border-top-width: 200px;
  color: white;
}

<div class="mask">
  abc
</div>

它就像一个面具，但内容和背景一样仍然可见。