css - 父母有背景颜色，但孩子是透明的

Question

我想知道是否可以让父 div 具有特定的背景颜色，而子 div 是否可以仅使用 CSS 透明。

让我给你看一个图表，它显示了我想要的：

我不能用两个兄弟 div 来做，因为 div 有圆角。
我可以做到这一点，使用图像作为角落和兄弟 div，但我想知道是否有一种优雅而简单的方式来做我想做的事，只用 CSS。

Answer 1

你可以和兄弟姐妹一起做，只允许你想要的圆角。这个页面有关于如何做的很好的信息。它基本上包括使用：border-top-left-radius: 10px 5px;.

所以，

<div id = "container">
  <div></div>
  <div></div>
</div>

CSS：

#container div:first-child
  {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: blue;
  }

#container div:last-child
  {
  border-radius: 10px;
  background-color: rgba(0,0,0,0);
  /* Same color as the sibling div and a distance of the radius + the separation */
  box-shadow: -12px 0 blue;
  }

我认为这应该有效。有用。这是带有更多美学修改的jsfiddle（更类似于您的图像）。

编辑：右边需要一个带有原始颜色边框的半径，所以我把一个新的jsfiddle放在一起并编辑了上面的代码。