家長有背景顏色，但孩子是透明的

Question

我想知道是否有可能有一個父div具有特定的背景顏色，並且子div，只有透明使用CSS。

讓我告訴你一個圖，其中顯示了我想要的東西：

我不能有兩個兄弟的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和編輯上面的代碼。