CSS Responsive banner with oblique shadow

Question

I'm trying to create a background for a banner using css where one side has a color and on the other side has another one with a 45° cut like this

I've been able to recreate the above image except for the drop shadow that doesn't stay in the right position. Any advice would be greatly appreciated.

This is my code code:

#container {
  height: 100px;
  width: 400px;
  overflow: hidden;
  background-color: #2962ff;
}

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid #2196f3;
  border-right: 400px solid transparent;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
  box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
}

<div id="container">
  <div id="triangle-topleft"></div>
</div>

Answer 1

The CSS triangle trick with border can not be used for this, as a shadow will still be applied to the box, and not only to the triangle.

You will have to create a pseudo element, rotate it and THEN apply shadow to it.

#container {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
}

#container:before { 
  content: '';
  position: absolute;
  left: 20%;
  width: 100%; 
  height: 200%; 
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: inset 0 0 20px 10px #333;
}

<div id="container"></div>

Basically you create a rectangle which is larger than the parent, then rotate it and apply a shadow. You can tweak the colors and rotation-degree for your needs

Demo: http://jsfiddle.net/b5TnZ/2032/