CSS Triangle Generator
Make a CSS triangle and copy the code.
Preview
100 × 100 px
Generated code
Copy and paste directly into your project.
CSS · border
Advertisement
Banner adResponsive
CSS Triangle Generator – Border & Clip-Path Code
Make a CSS triangle in any direction. Set the size and color, then copy the border or clip-path code, or Tailwind classes. Great for tooltip arrows.
Related tools
What is CSS Triangle Generator?
Create a pure CSS triangle without an image or SVG. Pick one of eight directions, set the width and height, and choose a color. Copy the classic border technique (a zero-size element with transparent borders), the modern clip-path version, or a single Tailwind element. The preview uses the exact code you copy.
- triangle
- css shapes
- arrow
- border trick
- clip-path
Features
What you get with CSS Triangle Generator.
Eight Directions
Point up, down, left or right, or make a right triangle in any corner.
Border and Clip-Path
Copy the classic border technique or the modern clip-path version.
Exact Preview
The preview is drawn with the code you copy, so what you see is what you get.
Tailwind Ready
Get a single element with utility classes.
How to use CSS Triangle Generator
Follow these steps to get the best results.
Choose a direction
Pick where the triangle points, or which corner holds the right angle.
Set the size and color
Use the width and height sliders and the color picker. The preview updates instantly.
Copy the code
Choose border, clip-path or Tailwind and paste it into your project.
Output.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #2563eb; }
Advertisement
In-feed adResponsive
Frequently asked questions
Common questions about CSS Triangle Generator.
An element with zero width and height is made of its borders only. Where two thick borders meet, the browser cuts the corner on a diagonal. Making one border colored and its neighbors transparent leaves a triangle.
Both work in all current browsers. The border version needs no sizing on the element and is common for tooltip arrows. The clip-path version is easier to read, uses a normal background color, and its shape is defined in percentages.
Put the triangle on a ::before or ::after pseudo-element with content set to an empty string and position it absolutely against the edge of the tooltip. Point it toward the element the tooltip belongs to.
Not directly. A clip-path cuts off anything outside the shape, including a border or box-shadow, and the border version already uses its borders to draw the shape. Use a filter: drop-shadow() on a parent element, or draw a slightly larger triangle behind it.
Yes. The Tailwind output is one div with arbitrary-value classes such as w-[100px], bg-[#2563eb] and a [clip-path:polygon(...)] class, with no extra CSS needed.
Advertisement
Mobile banner adResponsive
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.