Daily Toolkits

CSS triangelgenerator

Skapa CSS-trianglar med det klassiska gränstricket. Ställ in riktning, storlek och färg och kopiera sedan kodavsnittet.

CSS Triangle Generator

Live

CSS output

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #e11d48;

Key capabilities

  • Skapa CSS-trianglar med kanttrick – riktning, storlek och färg.
  • Körs i din webbläsare
  • Gratis att använda

Så använder du

  1. Välj triangelriktning.
  2. Ställ in storlek och fyllningsfärg.
  3. Kopiera CSS.

How this tool works

  1. Välj triangelriktning.
  2. Ställ in storlek och fyllningsfärg.
  3. Kopiera CSS.

Recommended settings

  • Använd först standardalternativen och justera sedan om det behövs

Supported formats

Text / on-page input

File size and limits

  • Mycket komplexa förhandsvisningar i flera lager kan kännas långsammare på äldre telefoner.

Privacy

Färg- och CSS-generatorer körs helt i din webbläsare. Förhandsvisningar och konverteringar laddar aldrig upp dina stilar.

Common use cases

  • Använd CSS Triangle Generator när du behöver: Generera CSS-trianglar med kanttrick – riktning, storlek och färg.

Troubleshooting

Förhandsgranskningen ser annorlunda ut efter inklistring

Kontrollera om det finns konkurrerande CSS på din sida (återställningar, ärvda färger). Kopiera den genererade regeln till en isolerad stilmall först.

FAQ

Laddar detta upp min CSS?

Nej. Generatorer och omvandlare körs i din webbläsare med liveförhandsvisning.

Behöver jag ett konto?

Nej. Öppna verktyget, justera kontrollerna och kopiera CSS.

Relaterade verktyg

CSS Clip Path Generator

Build polygon and shape clip-paths with an interactive preview.

Open tool

Border Radius Generator

Control each corner independently and preview rounded shapes with copy-ready CSS.

Open tool

Box Shadow Generator

Design layered box-shadows with offset, blur, spread, and color — live preview included.

Open tool