Html 带长方体阴影的Div底部的中心三角形

我有一个带有平滑方块阴影的div，它有一个使用“边界技巧”（取自stackoverflow问题）创建的三角形。我想在三角形上也有长方体阴影。因为它是用边框制作的，所以这可能是不可能的，但是你知道解决这个问题的其他方法/相对优雅的解决方法吗

下面的代码片段是我的代码的当前版本，没有三角形阴影

.hero{
z指数：1；
文本对齐：居中；
垫面：6%；
位置：相对位置；
背景色：红色；
高度：320px！重要；
宽度：100%！重要；
盒子阴影：0px 3px 4px绿色；
}
英雄：之后{
内容：''；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-50px；
宽度：0；
身高：0；
边框顶部：实心50px红色；
左边框：实心50px透明；
右边框：实心50px透明；
}

您可以尝试“变换-旋转”技巧，如下面的代码片段所示

.hero{
z指数：9；
文本对齐：居中；
垫面：6%；
位置：相对位置；
背景色：红色；
高度：320px！重要；
宽度：100%！重要；
盒子阴影：0px 3px 4px绿色；
}
英雄：以前{
内容：''；
位置：绝对位置；
底部：-25px；
左：0；
右：0；
保证金：自动；
宽度：50px；
高度：50px；
背景：红色；
变换：旋转（135度）；
盒子阴影：0px-3px 4px绿色；
}
.英雄短片{
位置：绝对位置；
底部：0；
背景：继承；
高度：35px；
左：0；
右：0；
z指数：9；
}

您可以尝试“变换-旋转”技巧，如下面的代码片段所示

.hero{
z指数：9；
文本对齐：居中；
垫面：6%；
位置：相对位置；
背景色：红色；
高度：320px！重要；
宽度：100%！重要；
盒子阴影：0px 3px 4px绿色；
}
英雄：以前{
内容：''；
位置：绝对位置；
底部：-25px；
左：0；
右：0；
保证金：自动；
宽度：50px；
高度：50px；
背景：红色；
变换：旋转（135度）；
盒子阴影：0px-3px 4px绿色；
}
.英雄短片{
位置：绝对位置；
底部：0；
背景：继承；
高度：35px；
左：0；
右：0；
z指数：9；
}

---

这有点麻烦，但我的方法是重叠旋转45度的方形div，就像我在这把小提琴中做的那样：

HTML:

---

然而值得注意的是，我的“三角形”并没有完全正确地居中

这有点麻烦，但我的方法是重叠旋转45度的方形div，就像我在这把小提琴中做的那样：

HTML:

---

然而值得注意的是，我的“三角形”并没有完全正确地居中

谢谢，这对我有用。然而，当我调整窗口大小时，大div的框阴影有时会在三角形中画一条线，有没有办法解决这个问题？不确定这是否只是由Chrome f12“responsive”工具引起的，因为当我手动调整窗口大小时不会发生这种情况谢谢，这对我很有效。然而，当我调整窗口大小时，大div的框阴影有时会在三角形中画一条线，你知道如何解决吗？不确定这是否只是由Chrome f12“responsive”工具引起的，因为手动调整窗口大小时不会发生这种情况

<div class="hero">
  <div class="sidekick">
  </div>
</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;
}
.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;
}