Verwendung von „Box Shadows“ und Clip-path zusammen

Lassen Sie uns Schritt für Schritt eine Situation betrachten, in der Sie nicht ganz das tun können, was sinnvoll erscheint, aber es mit CSS-Tricks trotzdem schaffen. In diesem Fall wird ein Schatten auf eine Form angewendet.

Sie erstellen eine Box

.tag {
  background: #FB8C00;
  color: #222;
  font: bold 32px system-ui;
  padding: 2rem 3rem 2rem 4rem;
}

Sie formen sie zu einer schönen Tag-Form

Sie verwenden clip-path, weil es dafür großartig ist.

.tag {
  /* ... */
  clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0 50%)
}

Sie möchten einen Schatten darauf haben, also…

Versuchen Sie, box-shadow zu verwenden.

.tag {
  /* ... */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Aber es funktioniert nicht. Nichts wird angezeigt. Sie denken, Sie werden verrückt. Sie gehen davon aus, dass die Syntax falsch ist. Das ist sie nicht. Das Problem ist, dass clip-path es abschneidet.

Sie können stattdessen einen übergeordneten Element mit drop-shadow versehen

Es gibt auch einen Filter, der Schatten erzeugt: drop-shadow(). Aber Sie können ihn nicht direkt auf dem Element verwenden, da clip-path ihn ebenfalls abschneiden würde. Also erstellen Sie ein übergeordnetes Element.

<span class="tag-wrap">
  <span class="tag">
    Tag
  </span>
</span>

Sie können box-shadow auch nicht auf diesem übergeordneten Element verwenden, da das übergeordnete Element immer noch ein Rechteck ist und der Schatten falsch aussehen würde. Sie können jedoch filter verwenden, und der Schatten folgt der Form.

Siehe den Pen
Schatten auf Form von Chris Coyier (@chriscoyier)
auf CodePen.

Das ist alles.