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/

Answer 2

You can try gradient like below:

 #container { height: 150px; background: linear-gradient(135deg,#2962ff 49.8%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px)); background-color:#2196f3; } 

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

And simply replace the deg with to bottom right if you want the diagonal result:

 #container { height: 150px; width:50%; background: linear-gradient(to bottom right,#2962ff 50%,rgba(0,0,0,0.75) 50%, #2196f3 calc(50% + 10px)); background-color:#2196f3; } 

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

Answer 3

You can add multiple color stops in Linear Gradients. Use two color set.

Gradient generated using Shapy

 .canvas { display: flex; height: 100vh; align-items: center; justify-content: center; min-height: 100%; min-width: 100%; } .gradient-canvas { max-height: 100%; max-width: 100%; width: 100%; height: 100%; background: linear-gradient(127deg, rgb(31, 163, 209) 0%, rgb(31, 163, 209) 50%, rgb(25, 64, 208) 0%, rgb(46, 101, 223) 52%) 50% 50% / 100% 100% no-repeat; } 

 <div class="canvas"><div class="gradient-canvas"></div></div>