CSS-trekant-generator

Skab triangler med ren CSS ved at bruge den klassiske border-trikken – ingen SVG, ingen billeder. Vælg en af de åtte retninger, sæt bredde og højde i pikser, vælg en farve, og kopier en selvstændig .triangle { width: 0; height: 0; ... }-regel, der renderer figurken udelukkende fra transparente og farvede borderer.

1. Klik på en Retningsknap (oppe, ned, venstre, højre eller en af de fire hørner: øverst-venstre, øverst-højre, nederst-venstre, nederst-højre). 2. Vælg triangelens farve med farvevalgern. 3. Træk sliderene for Brede (10–200px) og Højde (10–200px). 4. Kopier den genererede CSS fra kodpanelen.

Op / ned / venstre / højre skaber næst til ligetilstande isosceles triangler, der peger i den respektive retning, bygget fra to like transparente grænser og en farved græns. Top-venstre, top-højre, bottom-venstre, bottom-højre skaber hørntriangler med retvinkler, ved brug af en farved græns og en transparent græns. Outputet sætter alltid width: 0 og height: 0 på .triangle-klassen.