Div Background Shadow To Fit Custom Css Shape

I would like a box that has a small cut away. This box has an overlay shadow that has the same shape. Below is my attempt with both the shadow and the background. http://jsfiddle.n

Solution 1:

It's not clear to me what are you really intending. Anyway, since nobody has given you an answer, I think I can help you.

for this html:

<divclass="clip"><divclass="inner">aaaaa</div></div>

if you give this css:

.clip {height: 173px; width: 181px; left: 85px; top: 74px;position: absolute;
       overflow: hidden; 
       -webkit-transform: rotate(50deg); 
       background-color: rgba(200, 0, 0, 0.1);}

.inner {
       -webkit-transform: rotate(-50deg);
       background-color: blue;
       height: 100px;width: 150px;left: 16px;top: 52px;position: absolute;}

You will get the rectangle with a cutoff that you want in your inner div.

The outer div is rotated and has clipping enabled, so that it gives you a diagonal clipping.

Then you position the inner rectangle inside the clip div, so that it is only clipped in the left bottom corner. You counter-rotate this div so that it is horizontal again.

Now you can do whatever you want with it (I haven't used any background or border property yet), or in another inner div, without loosing the shape.

Only be warned that positioning the inner div is tricky, you are doing it in rotated coordinates !

The clipping div is semitransparently colored for the demo.

fiddle