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

Question

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

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

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

Answer 1

你可以和兄弟姐妹一起做，并且只允许圆角用于你想要的角落。 This page提供了有关如何操作的详细信息。它基本上包括使用：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并编辑了上面的代码。