ボックスシャドウのdivの下にある中央三角形

Question

私は、 "ボーダートリック"（this stackoverflowの質問から）を使用して作成された三角形を持つ滑らかなボックスシャドウを持つdivを持っています。私は三角形の上にボックスシャドーを持っていたい。国境を越えて作られているので、これはおそらく不可能ですが、この問題の代替方法/比較的エレガントな回避策を知っていますか？

以下のスニペットは、私のコードの現在のバージョンであり、三角形の影はありません。事前に

.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>

感謝;）

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

Answer 1

あなたは以下のコードで示すように、"回転変換"トリックを試みることができます。

.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

それはkludgey回避策の少しですが、私のアプローチは、正方形のdiv要素に重なるようになり、私はこのフィドルで行ったように、45度回転：

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; 
} 

それは私の「三角形」が非常に適切にセンタリングされていないこと、しかし、注目に値します。