Create a css folded-corner with shadow - html

Question

How can I do a folded-corner with external shadow which continues to the parent div shadow, like that :
Thanks.

Answer 1

CSS Backgrounds and Borders Module Level 4 introduces the corner-shape property:
By default, non-zero border-radii define a quarter-ellipse that rounds
the affected corners. However in some cases, other corner shapes are
desired. The corner-shape property specifies a reinterpretation
of the radii to define other corner shapes.
In your case, you should set it to bevel:
Border radii define a diagonal slice at the corner.
The code would be something like
corner-shape: bevel;
border-radius: 0 0 30px;
box-shadow: 0 0 5px #000;
However, this spec is a draft not ready for implementation. So browsers haven't implemented it. But you can use corner-shape preview to see how it would look like.

Answer 2

tried this one, a bit complex, but it works
.box {
width: 200px;
height: 100px;
position: relative;
padding: 25px;
background: none;
}
.box .content {
position: relative;
z-index: 2;
}
.box .the_background {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.box .the_background .square-top-right {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: #fff;
display: block;
z-index: 3;
}
.box .the_background .square-bottom-left {
width: 225px;
height: 150px;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
display: block;
z-index: 3;
}
.box .the_background:after {
content: '';
width: 35px;
height: 35px;
background: #ddd;
position: absolute;
z-index: 2;
right: 7px;
bottom: 7px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.box .the_background .square-shadow {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.box .the_background .square-shadow:before {
content: '';
position: absolute;
left: 0;
width: 250px;
height: 125px;
-webkit-shadow: 0px 0px 10px #000;
-moz-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.box .the_background .square-shadow:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 225px;
height: 25px;
-webkit-shadow: 0px 0px 10px #000;
-moz-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
<div class="box">
<div class="content">
Lorem ipsum...
</div>
<div class="the_background">
<div class="square-top-right"></div>
<div class="square-bottom-left"></div>
<div class="square-shadow"></div>
</div>
</div>