How to make a transparent part of a div

Question

Im trying to make part of a div transparent so the transparent part can show the background pattern ( a complicated one made with css). So i have a view_main div and 2 other small divs , divs that will be transparent and show the background

#View_main{
 margin-left:7%;
 top: 15%;
 height:100%;
 width:70%;
 background-color:white;
 position:relative;
 border:0;
 z-index:1;
}

the left_space div

#left_space{
 height:12%;
 width:12%;
 background-color:transparent;
 margin: auto;
 position: absolute;
 top: 0; left: -100%; bottom: 0; right: 0;
}

the right_space div

#right_space{
 height:12%;
 width:12%;
 background-color:red;
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: -100%;
}

i have tried to make the left_space with z-index=2 and the view_main z-index=1 and still nothing , Here is a simple example, i im trying to show the background (in this case is green but in my code is a pattern ,or image) from the left_space div I have also tried the opacity but still nothing! does someone have any idea?

here it is a visual rapresentation

Answer 1

Here's code for creating blue shape using before and after pseudo-classes

body {
  background-color: green;
}

.container {
  margin: 50px auto;
  height: 300px;
  width: 210px;
  background-color: blue;
  position: relative;
}
.container:before, .container:after {
  content: "";
  height: 44%;
  position: absolute;
  background-color: blue;
  z-index: -1;
  width: 112%;
  left: -6%;
}
.container:before {
  top: 0;
}
.container:after {
  bottom: 0;
}

DEMO