Css Shadow box ::after arrox with border method

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?

Temani Afif · Accepted Answer · 2020-05-25T20:52:07.073

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>

That's actually nice ! I edited the polygone to have a larger arrow and it work perfectly ! — Benjamin Barbé, May 24 '20 at 11:24
@BenjaminBarbé added a solution with CSS variables so you can easily adjust it — Temani Afif, May 24 '20 at 11:25
@BenjaminBarbé this will make it a different task, I need to redo a complete new code. it's out of the scope of the question. You should either edit your question to include this requirement or ask a new one for the border radius feature. — Temani Afif, May 24 '20 at 11:31
ok.. I was just wondering If you had any ideas :) I will edit my question — Benjamin Barbé, May 24 '20 at 11:33
@BenjaminBarbé I have a lot ;) but it won't be a simpe property to be added and I cannot edit my answer because I will make it irrelevant to the actual question that's why if you edit the actual question I can edit my answer or if you ask a new one I can add the code there — Temani Afif, May 24 '20 at 11:34
Okay, I edit the question and added a screenshot requirement :) Thank you SO MUCH for you help — Benjamin Barbé, May 24 '20 at 11:37
I appreciate your help, that's exactly what i wanted :) Have a great day — Benjamin Barbé, May 24 '20 at 11:54
hey @TemaniAfif - what's the compatibility like for CSS variables? Never seen or used them before — jbutler483, May 24 '20 at 12:24
@jbutler483 if you omit the dead browser IE you have a good compatibility: https://caniuse.com/#feat=css-variables — Temani Afif, May 24 '20 at 12:30

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

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>

Hello ! @G-Cyrillus Thanks for the tips, do you who can I manage to do it with the top::before arrow ? — Benjamin Barbé, May 24 '20 at 11:05
@BenjaminBarbé ?? i removed it. Iguess i misunderstood the final result expected. — G-Cyrillus, May 24 '20 at 11:13
Like the screenshoot, I would like to do an inner box shadow (I don't know if you can see but it's a arrow inside the div ) — Benjamin Barbé, May 24 '20 at 11:14
okay, take a look at : https://stackoverflow.com/questions/36782245/css-triangular-cutout-with-border-and-transparent-gap/36795139#36795139 it might inspire you if clip-path does not meet your need ... i guess not ;) — G-Cyrillus, May 24 '20 at 11:28

Css Shadow box ::after arrox with border method

2 Answers2

Linked