Ich mag Adam Laki's Schneller Tipp: CSS-Dreiecke, weil er diese allgegenwärtige Tatsache über Frontend-Techniken abdeckt: es gibt immer viele Wege, dasselbe zu tun. In diesem Fall kann das Zeichnen eines Dreiecks mit
- mit
borderund einem kollabierten Element - mit
clip-path: polygon() - mit
transform: rotate()undoverflow: hidden - mit Glyphen wie ▼
Ich würde sagen, dass ich Dreiecke über die Jahre hinweg am häufigsten mit dem Border-Trick erstellt habe, aber ich denke, meine Lieblingsmethode ist jetzt die Verwendung von clip-path. Code wie dieser ist für mich ziemlich klar, verständlich und wartbar: clip-path: polygon(50% 0, 0 100%, 100% 100%); Gehirn: Mitte oben! Unten rechts! Unten links! Dreieck!
Meine zweitbeste Methode ist eine Option, die nicht auf Adams Liste stand: Inline <svg>! Diese Art von Ding ist fast genauso gehirnfreundlich: <polygon points="0,0 100,0 50,100"/>.
Irgendwelche Tipps zum Hinzufügen eines Schattens, wenn das Dreieck Teil eines größeren Tooltip-/Bubble-Musters ist? Den Schatten sowohl auf das Dreieck als auch auf die Box zu bekommen, fühlt sich immer schwieriger an, als es sein sollte.
Hallo Mike! Hast du versucht, den CSS-Filter
drop-shadow()zu verwenden? Die Browserunterstützung ist nicht zu 100 %, aber es könnte ein guter Anfang sein: https://css-tricks.de/breaking-css-box-shadow-vs-drop-shadow/Danke, Geoff!