CSS kann alle Arten von Formen erzeugen. Quadrate und Rechtecke sind einfach, da sie die natürlichen Formen des Webs sind. Fügt man width und height hinzu, hat man das Rechteck in der exakten Größe, die man braucht. Fügt man border-radius hinzu, kann man diese Form abrunden, und wenn genug davon vorhanden ist, kann man diese Rechtecke in Kreise und Ovale verwandeln.
Wir bekommen auch die Pseudoelemente ::before und ::after in CSS, die uns das Potenzial für zwei weitere Formen geben, die wir zum ursprünglichen Element hinzufügen können. Durch clevere Nutzung von Positionierung, Transformation und vielen anderen Tricks können wir viele Formen in CSS mit nur einem einzigen HTML-Element erstellen.
Heutzutage sind SVG, clip-path oder CSS Mask Ihre beste Wahl, um Formen zu zeichnen. Sehen Sie sich zum Beispiel diese CSS Shapes Collection, diese SVG-Icon-Sets, diesen clip-path Editor und diese Einführung in CSS Clipping an. Dieser Artikel wurde ursprünglich geschrieben, bevor eine dieser Technologien wirklich Fuß gefasst hatte!
Es ist immer wieder toll zu sehen, welche Formen Leute in CSS erstellen. Vielleicht wäre eine Fortsetzung der Gründe, "warum" man immer noch CSS verwenden sollte, gut? Ich schaue oft auf diese Folien von Sara Soueidan von vor Jahren zurück, wo sie sogar erwähnt, welche coolen Formen Leute mit CSS gemacht hatten, aber ob es nicht besser mit SVG wäre?
https://slides.com/sarasoueidan/building-better-interfaces-with-svg#/9
Ich denke schon, SVG ist im Allgemeinen besser
Das ist die Art von einfach-easy Trick, der Gold (in Pfund, bitte) wert ist, um ihn in seinen Lesezeichen zu haben.
Vielen Dank.
Hallo, danke für das Teilen, ich habe nur einen Zweifel, kann man nur Vollfarben für Fünfecke verwenden? Ich brauche ein transparentes Fünfeck nur mit der Umrandung
Hey Oscar, gute Frage! Ja, die Form benötigt Vollfarben, da sie auf
border-colorbasiert und nur Farbwerte akzeptiert.Wenn Sie nach einer Fünfeck-Form nur mit einer Umrandung suchen, sollten Sie stattdessen eine SVG in Betracht ziehen. Damit könnten Sie den Pfad zeichnen und ihm einen Strich zuweisen, ohne eine Füllung der Form selbst.
https://cssicon.space/
https://cssicon.space/#/animate/arrow-left/to/arrow-right
Es hat eine gute Sammlung von CSS-Formen und Icons mit Animation
endlich lerne ich die CSS-Form. Danke Danke Danke Danke Danke Danke Danke Danke vielmals