CODEWITHSUNDEEP
css
Devdatta Tengshe
Devdatta Tengshe

Reputation: 4075

Parent has background color, but child is transparent

I was wondering if it was possible to have a parent div have a particular background color, and the child div, be transparent using only CSS.

Let me show you a diagram, which displays what I want: enter image description here

I can't do it with two sibling Divs, because the divs have rounded corners.
I could do this, using images for the corners, and sibling divs, but I'll like to know if there is a elegant and simple way of doing what I want, with only CSS.

Upvotes: 1

Views: 3035

Answers (1)

Francisco Presencia
Francisco Presencia

Reputation: 8851

You can do it with siblings and allow rounded corners only for the corners you want. This page has good information about how to do it. It basically consists on using: border-top-left-radius: 10px 5px;.

So,

<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;
  }

I think that should work. It works. Here's the jsfiddle with some more aesthetic modifications (for resembling more to your image).

EDIT: the right one needed a radius with the border in the original color, so I put together a new jsfiddle and edited the code above.

Upvotes: 5

Related Questions