Question

我有一个带有光滑盒子阴影的div，它有一个使用＆＃34;边界技巧创建的三角形＆＃34; （摘自this stackoverflow问题）。我想在三角形上也有盒子阴影。由于它是用边框制作的，这可能是不可能的，但你知道这个问题的任何替代方式/相对优雅的解决方法吗？

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

＆＃13;

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

＆＃13;

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

＆＃13;

提前致谢;）

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

Answer 1

您可以尝试使用“transform rotate”技巧，如下面的代码段所示。

.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解决方法，但我的方法是重叠一个旋转45度的方形div，就像我在这个小提琴中所做的那样：

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

值得注意的是，我的三角形＆＃34;不是很正确的中心。

Div底部的中心三角形有框阴影

2 个答案: