CSS irregular shape, combined with shadow

Question

I want to combine two shapes and their shadows, to create the UI shown below.

In my attempts the shadow of the first element would overlap the second element.

Any ideas how I can make this work, cross browser?

HTML

<div class="mainShape">
  <div class="subShape">

  </div>
</div>

CSS

.mainShape {
  position: relative;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
  background: white;
  width: 200px;
  height: 600px;
}

.subShape {
  position: absolute;
  top: 0px;
  right: -60px;
  width: 60px;
  height: 180px;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
}

https://jsfiddle.net/mk32g7yj/7/

Answer 1

There may be a more elegant way to do this, such as Sumurai's suggestion of using an svg, but a rather hacky way of achieving this could be to stick a "masking" div (with a white background) up between the two other divs:

.mainShape {
  position: relative;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
  background: white;
  width: 200px;
  height: 600px;
}

.subShape {
  position: absolute;
  top: 0px;
  right: -60px;
  width: 60px;
  height: 180px;
  box-shadow: 6px 0 21px -3px rgba(86,93,111,0.12);
}

.mask {
  position: absolute;
  top:0px;
  right:-20px;
  width:25px;
  height:180px;
  background-color:white;
}

<div class="mainShape">
  <div class="subShape">

  </div>
  <div class="mask">
  
  </div>
</div>