How to make the area in the lower left corner not filled with background color? https://jsfiddle.net/0xhypez7/1/

Of course, you can insert a picture there, but maybe like some kind of shadows?

.q1 { width: 400px; height: 200px; background: blue; } .q2 { float: left; margin-top: 120px; width: 100px; height: 20px; background: black; } .q2+div { float: left; margin-top: 150px; width: 177px; height: 20px; background: #000; transform: skew(0, 19deg); } 
 <div class="q1"> <div class="q2"></div> <div></div> </div>

    1 answer 1

     .q1 { width: 400px; height: 200px; background: blue; position: relative; } .q2 { float: left; margin-top: 120px; width: 100px; height: 100px; outline: 10px soled red; border-top: 20px solid black; background: #FFF; } .q2+div { float: left; margin-top: 150px; width: 177px; height: 100px; background: #FFF; border-top: 20px solid black; transform: skew(0, 19deg); } 
     <div class="q1"> <div class="q2"></div> <div></div> </div>