Transparent border on div with parent div

Question

i'm looking for a method to do something like this :

First, i though about transparent borders but it won't work as there is a parent div (blue background).

The goal is to set the border transparent + the parent div around the child transparent too, so we can see the background image as border.

Can anyone give me some advice ? Thanks !

i think you will have to split the blue div and wrap them around the Menu points. In this case you can use margin instead of border. i don't think its possible to make something transparent thru 2 layers — Aytee, Dec 17 '15 at 10:40
Yeah, i though about something else : making blue background with the transparent cases that will wrap the list buttons. thanks anyway for the feedback — Sentynel, Dec 17 '15 at 10:47

score 0 · Answer 1 · answered Dec 17 '15 at 10:49

You Can try to this Css

div{width:300px;border:solid 1px red; background:blue;
padding-left:20px;}
ul {list-style-type:none;margin:0; padding:0;}
ul li{background:url('https://www.gravatar.com/avatar/76e03db06bb6dcf24f95bf4d354486db?s=64&d=identicon&r=PG') repeat 0 0;
margin:10px 0; padding:15px 10px; color:red; position:relative;z-index: 2;
}

ul li:after{
      content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    right: 0px;
    background: rgba(0,0,0,0.4);
    z-index: -1;
}

<div>
<ul>
  <li>Hello Hello </li>
      <li>Hello Hello </li>
  <li>Hello Hello </li>
      <li>Hello Hello </li>
  <li>Hello Hello </li>
  </ul>
</div>

Transparent border on div with parent div

1 Answers1