Css Shadow box ::after arrox with border method - html

Question

I’m trying to realise a couples of element with this design :
I also want to have a border radius like this :
What I managed to do :
For the first div, I didn’t managed to do inner box shadow for the ::before arrow and box shadow for the ::after arrow
For the last div, I managed to do it but when I try to change the size of the arrow to make it larger, the box-shadows is not working anymore...
body {
background-color: white;
}
.test{
margin-top: -30px!important;
}
.test2{
z-index:13;
}
.test3{
z-index:12;
}
.test4{
z-index:11;
}
.test5{
z-index:10;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: white;
box-shadow: 0px 3px 10px 0 black;
}
.triangle::before{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top: 0;
left: 40%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 50px 0 50px;
border-color: lightgrey transparent transparent transparent;
//box-shadow: 0px 3px 10px 0 black;
}
.triangle::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -20px;
left: 40%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 50px 0 50px;
border-color: lightgrey transparent transparent transparent;
//box-shadow: 0px 3px 10px 0 black;
}
.toto::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 50%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent lightgrey lightgrey;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
<div class="triangle test2">Inner box shadow for before content not working</div>
<div class="triangle test test3">box shadow for after content not working</div>
<div class="triangle test test4">Content 3</div>
<div class="triangle test test5">Content 4</div>
<div class="triangle toto">Managed to do it but the arrow is not editable(I want to make it longer)</div>
Anyone already had this issue or know how to solve this problem?

Answer 1

This is suitable for clip-path
.box {
margin: 50px;
height: 100px;
position:relative;
z-index:0;
filter: drop-shadow(0 0 5px #000);
}
.box::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: #f2f2f2;
clip-path: polygon(
0 0,
calc(50% - 20px) 0, 50% 20px, calc(50% + 20px) 0, /* top arrow */
100% 0,
100% calc(100% - 20px),
calc(50% - 20px) calc(100% - 20px), 50% 100%, calc(50% + 20px) calc(100% - 20px), /* bottom arrow */
0 calc(100% - 20px));
}
<div class="box"></div>
With CSS variables you can easily handle it:
.box {
--w:40px; /* width of the arrow */
--h:20px; /* height of the arrow */
margin: 50px;
height: 100px;
padding:var(--h) 0;
position:relative;
z-index:0;
filter: drop-shadow(0 0 5px #000);
}
.box::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background: #f2f2f2;
clip-path: polygon(
0 0,
calc(50% - var(--w)/2) 0, 50% var(--h), calc(50% + var(--w)/2) 0, /* top arrow */
100% 0,
100% calc(100% - var(--h)),
calc(50% - var(--w)/2) calc(100% - var(--h)), 50% 100%, calc(50% + var(--w)/2) calc(100% - var(--h)), /* bottom arrow */
0 calc(100% - var(--h)));
}
<div class="box"></div>
<div class="box" style="--w:60px;"></div>
<div class="box" style="--w:200px;--h:40px"></div>
To add border radius you can edit like below:
.box {
--w: 40px; /* width of the arrow */
--h: 20px; /* height of the arrow */
--r: 30px; /* radius */
margin: 50px;
height: 100px;
padding: var(--h) 0;
position: relative;
z-index: 0;
filter: drop-shadow(0 0 5px #000);
}
.box::before,
.box::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
background: #f2f2f2;
}
.box::before {
top: 0;
bottom: var(--h);
border-radius: var(--r);
clip-path: polygon( 0 0, calc(50% - var(--w)/2) 0, 50% var(--h), calc(50% + var(--w)/2) 0, 100% 0, 100% 100%, 0 100%);
}
.box::after {
bottom: 0;
height: var(--h);
clip-path: polygon( 0 0, 100% 0, calc(50% - var(--w)/2) 0, 50% 100%, calc(50% + var(--w)/2) 0);
}
<div class="box"></div>
<div class="box" style="--w:60px;--r:20px"></div>
<div class="box" style="--w:200px;--h:40px;--r:60px"></div>

Answer 2

You may use filter / drop-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a <filter-function>.
possible use :
body {
background-color: white;
}
.test {
margin-top: -30px!important;
}
.test2 {
z-index: 13;
}
.test3 {
z-index: 12;
}
.test4 {
z-index: 11;
}
.test5 {
z-index: 10;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: white;
filter: drop-shadow(0px 3px 10px black);
}
.triangle::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -20px;
left: 40%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 50px 0 50px;
border-color: white transparent transparent transparent;
}
.toto::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 50%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent white white;
transform-origin: 0 0;
transform: rotate(-45deg);
}
<div class="triangle test2">Inner box shadow for before content not working</div>
<div class="triangle test test3">box shadow for after content not working</div>
<div class="triangle test test4">Content 3</div>
<div class="triangle test test5">Content 4</div>
<div class="triangle toto">Managed to do it but the arrow is not editable(I want to make it longer)</div>