How to make this specific shadow for a box : before? - html

Question

How can i achieve the top left part of this box like the image below with css?
I can't make the shadow below the yellow triangle.
some suggestions would be helpfull.
Below is my CSS + HTML so far:
:root {
--jaune: #FFF701;
--bleu: #212D55;
}
.book{
margin-bottom: 0px;
font-size: x-small;
color: #364165;
text-align: center;
}
.box {
border: 1px solid var(--bleu);
background-color: #fff;
position: relative;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 16px;
}
.box::before {
content: ' ';
border-top: 32px solid #d3d5dd;
border-right: 30px solid var(--jaune);
width: 0;
position: absolute;
}
.btn_book{
background-color: #212d55;
width: 128px;
margin-right:79px;
margin-left:79px;
border: 1px solid #212d55;
position: absolute;
color: white;
text-transform: uppercase;
cursor: pointer;
}
.btn_book:hover{
background-color: var(--jaune);
color:#212d55;
}
.btn_book:hover::before {
border-top: 10px solid #212d55;
}
.btn_book:before {
content: "";
height: 0;
width: 0;
border-top: 10px solid #fffa0a;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
z-index: 1;
top:0;
left: 0;
transform-origin: left;
transform: translate(60%) translateY(-71%) rotate(135deg)
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box" style="width: 18rem; height: 19rem;">
<img src="https://b2btolink.com/leboudoir/wp-content/themes/leboudoir/images/logo.png" style="width: 100px; margin-left:80px;">
<p style="text-align:center;color: #212d55;">
<b>NEW CANAAN</b>
</p>
<hr class="dashed">
<p class="book"> 160 Main Street</p>
<p class="book"> New Canaan CT 06840</p>
<p class="book"> 203-957-8600</p>
<hr class="dashed">
<button type="button" class="btn_book">BOOK NOW</button>
</div>
How can this be possible with shadow property

Answer 1

Here is an idea using multiple background with gradient and skew transformation:
.box {
border: 1px solid #212D55;
background-color: #fff;
position: relative;
margin: 10px;
background:
linear-gradient(to top left,transparent 50%,#d3d5dd 50%) top left/32px 32px no-repeat;
}
.box::before {
content: ' ';
position: absolute;
top:-1px;
left:-1px;
width:34px;
height:34px;
background:
linear-gradient(to bottom right,transparent 45%,grey 50%) bottom/100% 5px,
linear-gradient(to bottom right,transparent 45%,grey 50%) right/5px 100%,
linear-gradient(to bottom right,transparent 50%,yellow 50%);
background-repeat: no-repeat;
transform: skew(5deg,5deg);
}
<div class="box" style="width: 18rem; height: 19rem;">
</div>

Answer 2

You will need to adjust this a little, but you should be able to use clip-pathto create a triangle on another div, then change the z-index on your ::before to bring it in front of the triangle.
:root {
--jaune: #FFF701;
--bleu: #212D55;
}
.book{
margin-bottom: 0px;
font-size: x-small;
color: #364165;
text-align: center;
}
.box {
border: 1px solid var(--bleu);
background-color: #fff;
position: relative;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 16px;
}
.box::before {
content: ' ';
border-top: 32px solid #d3d5dd;
border-right: 30px solid var(--jaune);
width: 0;
position: absolute;
z-index: 100;
}
.shadow{
position: absolute;
top: 5px;
height: 41px;
left: 0px;
width: 37px;
background: #A0A0A0;
clip-path: polygon(83% 0%, 4% 63%, 100% 91%);
z-index: 1;
}
.btn_book{
background-color: #212d55;
width: 128px;
margin-right:79px;
margin-left:79px;
border: 1px solid #212d55;
position: absolute;
color: white;
text-transform: uppercase;
cursor: pointer;
}
.btn_book:hover{
background-color: var(--jaune);
color:#212d55;
}
.btn_book:hover::before {
border-top: 10px solid #212d55;
}
.btn_book:before {
content: "";
height: 0;
width: 0;
border-top: 10px solid #fffa0a;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
z-index: 1;
top:0;
left: 0;
transform-origin: left;
transform: translate(60%) translateY(-71%) rotate(135deg)
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box" style="width: 18rem; height: 19rem;">
<div class="shadow"></div>
<img src="https://b2btolink.com/leboudoir/wp-content/themes/leboudoir/images/logo.png" style="width: 100px; margin-left:80px;">
<p style="text-align:center;color: #212d55;">
<b>NEW CANAAN</b>
</p>
<hr class="dashed">
<p class="book"> 160 Main Street</p>
<p class="book"> New Canaan CT 06840</p>
<p class="book"> 203-957-8600</p>
<hr class="dashed">
<button type="button" class="btn_book">BOOK NOW</button>
</div>