CSS多边形阴影

Question

我使用clip-path属性来裁剪我所在的块元素。

clip-path: polygon(0 0, 100% 0, 100% 100px, 50% 100%, 0 100px);

我希望在该元素中添加“投影效果”。因此，我尝试了一些技术，如下所示：

box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);

或者...

filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));

在CodePen上查看我的测试环境。

CSS或SVG能实现吗？

- Caio Tarifa

---

你只能在 clip-path 上使用 inset 作为 box-shadow，因为一般的 box-shadow 是在元素外部，所以会被剪切。 - tao

@AndreiGheorghiu，即使使用clip-path: inset(0)（仅作测试），box-shadow仍然被隐藏。 - Caio Tarifa

最好使用SVG或尝试渐变 https://codepen.io/anon/pen/BRQzbq - G-Cyrillus

box-shadow 应该是 inset，@CaioTarifa，而不是 clip-path。您可以在元素上始终使用 clip-path，同时将其包装在具有 position:relative 的相同父级内，并添加一个仅用于获取 box-shadow 效果的 position:absolute 的 svg。 - tao

@AndreiGheorghiu，我的错，你是对的。我不知道我是否理解了，但我会尝试。 - Caio Tarifa

Answer 1

如评论中所述，您需要两个嵌套元素来实现此效果，内部用于裁剪，外部用于添加阴影。

body {
  background-color: gray;
}

.navigation {
  filter: drop-shadow(0 15px 30px rgba(0, 0, 200, 0.5));
}

.innernav {
  /* PATH */
  clip-path: polygon(0 0, 100% 0, 100% 100px, 50% 100%, 0 100px);
  
  
  /* OTHERS */
  background-color: silver;
  color: white;
  height: 150px;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 100;
}

.main {
  padding: 200px 20px 0;
  text-align: center;
}

<nav class="navigation"><div class="innernav">Hi, I'm a nav.</div></nav>

<main class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quia velit modi veniam! Velit fuga facilis blanditiis iure aperiam cumque quasi officia quaerat dignissimos neque repellat quisquam voluptates sequi, hic?</p>
</main>

- vals