Css Triangle Generator

Lag rene CSS-trekanter med den klassiske border-teknikken — ingen SVG, ingen bilder. Velg én av åtte retninger, sett bredde og høyde i piksler, velg en farge og kopier en selvstendig .triangle { width: 0; height: 0; ... }-regel som tegner formen utelukkende fra transparente og fargede kanter.

1. Klikk på en Retning-knapp (opp, ned, venstre, høyre, eller en av de fire hjørnene: top-left, top-right, bottom-left, bottom-right). 2. Velg trekantens Farge med fargevelgeren. 3. Dra gliderne for Bredde (10–200px) og Høyde (10–200px). 4. Kopier den genererte CSS-en fra kodepanelet.

up / down / left / right produserer tilnærmet likesidede likebente trekanter som peker i den retningen, bygget fra to like transparente kanter og én farget kant. top-left, top-right, bottom-left, bottom-right produserer rettvinklede hjørnetrekanter med én farget kant og én transparent kant. Utdataen setter alltid width: 0 og height: 0 på .triangle-klassen.