Dreieck mit Schatten

Sie wissen wahrscheinlich schon, dass Sie Dreiecke mit CSS erstellen können. Aber was, wenn Sie einen Schatten dahinter legen möchten? Leider ändert der klassische Rahmen-Trick die Form des Elements nicht, er ist nur ein visueller Trick. Schauen wir uns ein paar alternative Lösungen an.

Einfach Unicode verwenden

Es gibt Dreieckszeichen in Unicode. Wie

▲▼◀▶

Und noch viel mehr.

Wenn Sie dies als Ihr Dreieck verwenden, können Sie es auswählen und damit allerhand Schickes machen.

<span class="triangle">▲</span>

.triangle {
  color: #BADA55;
  text-shadow: 0 0 20px black;
}

Farbe, Schatten, Größe, was auch immer. Sie könnten sogar noch schicker werden. Wenn das Dreieck nicht die exakte Form hat, die Sie möchten, oder nicht in die richtige Richtung zeigt, können Sie CSS3-Transformations-Elemente verwenden, um es zu strecken oder zu drehen. Hier ist eine Demo davon.

Siehe den Stift myomvM von Chris Coyier (@chriscoyier) auf CodePen.

Ich mag diese Technik, aber es gibt einige offensichtliche Probleme. Eines ist, dass die Abhängigkeit von CSS3-Transformations-Funktionen keine tiefe Browser-Unterstützung bietet. Sicherlich kein IE 8. Aber hey, dieser Artikel handelt von Schatten, also ist das sowieso CSS3. Selbst ältere Browser als diese könnten Probleme mit den Unicode-Symbolen selbst haben. Also, eine faire Warnung.

Die Double-Box-Methode

Wenn wir mit CSS3 einverstanden sind, könnte eine Methode darin bestehen, eine Container-Box mit verstecktem Überlauf und eine weitere darin liegende Box zu haben, die gedreht ist und herausragt. Der Teil, der noch sichtbar ist, würde ein Dreieck bilden. Dann können Sie einen box-shadow für beide Boxen verwenden, um einen Schatten rundherum zu erzielen.

<div class="triangle-with-shadow"></div>

.triangle-with-shadow {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
}
.triangle-with-shadow:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: #999;
  transform: rotate(45deg); /* Prefixes... */
  top: 75px;
  left: 25px;
  box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}

Beachten Sie, dass wir einen negativen Streuwert auf dem übergeordneten Element verwenden, um den Schatten nur auf einer Seite erscheinen zu lassen. Hier ist eine Demo davon.

Siehe den Stift Triangle with Shadow von Chris Coyier (@chriscoyier) auf CodePen.

Einfach ein Bild verwenden

Ich bin kein großer Fan davon, da es eine zusätzliche HTTP-Anfrage oder eine weitere Sache ist, die man in seinem Sprite verwalten muss. Und Sie werden die "responsiven Bilder" haben (sehen nicht so gut aus auf Pixel-dichten Displays, es sei denn, Sie haben mehrere Versionen davon bereit und gehen große Längen, um sie zu reparieren). Die anderen Techniken sind im Wesentlichen Vektorgrafiken, so dass sie in jeder Umgebung scharf sind.

Aber, wissen Sie, niemand wird sterben und Sie werden eine gute Browser-Unterstützung erhalten.

Die Zukunft

Sie können filter: drop-shadow() verwenden, um sehr einfach einen Schatten über die Form zu werfen. Hier ist ein Artikel darüber.