规则阴影

clip-path: polygon()

drop-shadow 可以穿透元素的透明部分 (opens new window)

<main>
  <section>Magic</section>
</main>

main {
  height: 400px;
  display: grid;
  place-items: center;
  filter: drop-shadow(2px 4px 3px hsla(60, 100%, 10%, 0.5));
}

section {
  display: grid;
  place-items: center;
  width: 200px;
  height: 60px;
  font-size: 20px;
  color: #be9451;
  user-select: none;
  background: linear-gradient(#f5e5bf, #fbe8c8, #f5e5bf);
  clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}