Triangle central au fond de Div avec boîte-ombre

Question

J'ai un div avec une boîte-ombre lisse qui a un triangle créé en utilisant le "tour de frontière" (pris de this question stackoverflow). Je veux aussi avoir la boîte-ombre sur le triangle. Comme il est fait avec des frontières, c'est probablement impossible, mais connaissez-vous une solution de rechange alternative/relativement élégante pour ce problème?

L'extrait ci-dessous est la version actuelle de mon code, sans l'ombre du triangle.

.hero { 
 
    z-index: 1; 
 
    text-align: center; 
 
    padding-top: 6%; 
 
    position: relative; 
 
    background-color: red; 
 
    height: 320px !important; 
 
    width: 100% !important; 
 
    box-shadow: 0px 3px 4px green; 
 
} 
 

 
.hero:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: solid 50px red; 
 
    border-left: solid 50px transparent; 
 
    border-right: solid 50px transparent; 
 
}

<div class="hero"></div>

Merci à l'avance;)

Picture of the Layout right now, with the missing shadow around the triangle

Answer 1

Vous pouvez essayer un "transformer rotate" trick, comme le montre l'extrait de code ci-dessous.

.hero { 
 
    z-index: 9; 
 
    text-align: center; 
 
    padding-top: 6%; 
 
    position: relative; 
 
    background-color: red; 
 
    height: 320px !important; 
 
    width: 100% !important; 
 
    box-shadow: 0px 3px 4px green; 
 
} 
 

 
.hero:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
    transform: rotate(135deg); 
 
    box-shadow: 0px -3px 4px green; 
 
} 
 

 
.hero-clip { 
 
    position: absolute; 
 
    bottom: 0; 
 
    background: inherit; 
 
    height: 35px; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 9; 
 
}

<div class="hero"> 
 
    <div class="hero-clip"></div> 
 
</div>

Answer 2

Il est un peu d'une solution de contournement kludgey, mais mon approche serait de chevaucher un div carré tourné de 45 degrés, comme je l'ai fait dans ce violon:

https://jsfiddle.net/needsmorejson/wgxp1tcp/

HTML:

<div class="hero"> 
    <div class="sidekick"> 
    </div> 
</div> 

CSS:

.hero { 
    z-index: 1; 
    text-align: center; 
    padding-top: 6%; 
    position: relative; 
    background-color: red; 
    height: 320px !important; 
    width: 100% !important; 
    box-shadow: 0px 3px 4px green; 
} 
.sidekick{ 
    width:71px !important; 
    height:71px !important; 
    z-index: 1; 
    text-align: center; 
    position: absolute; 
    top: 333px; 
    left: 50%; 
    padding-top: -25px !important; 
    margin-top -25px !important; 
    margin-left: auto; 
    margin-right: auto; 
    transform: rotate(-45deg); 
    background-color: red; 
    border-top: solid 0px transparent; 
    border-right: solid 0px transparent; 
    box-shadow: -3px 3px 4px green; 
} 

Il convient de noter cependant que mon « triangle » est pas tout à fait centré.