CSS-triangelfenerator

Skapa rena CSS-trianglar med det klassiska border-tricket — inget SVG, inga bilder. Välj en av åtta riktningar, ange bredd och höjd i pixlar, välj en färg och kopiera en komplett .triangle { width: 0; height: 0; ... }-regel som renderar formen helt från genomskinliga och färgade ramar.

1. Klicka på en riktningsknapp (upp, ner, vänster, höger eller en av de fyra hörnen: top-left, top-right, bottom-left, bottom-right). 2. Välj triangelns färg med färgväljaren. 3. Dra reglagen Width (10–200px) och Height (10–200px). 4. Kopiera den genererade CSS-koden från kodpanelen.

upp / ner / vänster / höger ger liksidigt-liknande likbenta trianglar som pekar i den riktningen, byggda av två lika genomskinliga ramar och en färgad ram. top-left, top-right, bottom-left, bottom-right ger rätvinkliga hörntrianglar med en färgad ram och en genomskinlig ram. Utdata sätter alltid width: 0 och height: 0 på klassen .triangle.