There are two clean ways to draw a triangle in CSS. The classic trick gives a zero-size box thick borders and makes all but one of them transparent. The modern way gives a normal box a size and a background, then cuts it with clip-path: polygon() using three points. This generator writes both for eight directions.
| Need | Border method | clip-path |
|---|---|---|
| Solid one-colour arrow | Works everywhere | Works everywhere current |
| Gradient or image fill | No, borders take one colour each | Yes, it clips any background |
| Outline only | Stack two triangles | Not directly; clip-path also cuts off borders and shadows |
| Size set by width and height | No, sized by border widths | Yes |
| Tooltip arrow on ::before or ::after | The usual choice | Also fine |
Updated
Arrows on tooltips, speech bubbles, dropdown carets and ribbon corners are almost always small CSS triangles. Choose a direction, drag the size, and the preview shows both techniques side by side so you can see they match before copying the one that fits your component.
Choose a direction, set the size and colour, and compare the border triangle with the clip-path triangle before copying.
The ::after element has no size. Its top border is the arrow and the side borders are transparent.
<style>
.tip { position: relative; display: inline-block; margin: 20px; padding: 10px 14px;
background: #0f172a; color: #fff; border-radius: 8px; }
.tip::after { content: ""; position: absolute; top: 100%; left: 24px;
border-top: 10px solid #0f172a;
border-left: 8px solid transparent;
border-right: 8px solid transparent; }
</style>
<span class="tip">Saved to your drafts</span>A border triangle cannot take a gradient. A clipped box can, because clip-path cuts whatever background the box paints.
<style>
.tri { width: 140px; height: 121px; margin: 10px auto;
background: linear-gradient(135deg, #4F98FB, #ec4899);
clip-path: polygon(50% 0, 100% 100%, 0 100%); }
</style>
<div class="tri"></div>For a tiny arrow that sticks out of a tooltip or menu, the border method is still the shortest code, and it lives comfortably on a pseudo-element. It has one colour and its size comes from border widths, which is all an arrow needs.
For a decorative shape, a hero corner or anything with a gradient, clip-path is easier to reason about: you set width and height like any box and describe the three corners as percentages.
Corner triangles are right-angled and fill one half of a rectangle. With borders you colour one side and make one adjacent side transparent, leaving the other two at zero. They are handy for folded paper corners and ribbon tails.
Where two borders meet, the browser draws the corner on a diagonal. With width and height at 0, the box is nothing but four border wedges meeting in the middle. Colour one wedge and make its neighbours transparent and you see a single triangle.
The height of an equilateral triangle is its base times the square root of 3 divided by 2, about 0.866. For a 100 pixel base, use a height of about 87 pixels.
Not on its own. A common approach is to stack two triangles: a slightly larger one in the outline colour behind, and the fill colour on top, offset by the outline thickness. An inline SVG with a stroke is simpler when you need a crisp outline.
No. The element keeps its full rectangular size in the layout; clip-path only changes what is painted. Content outside the polygon, including box shadows and borders, is cut away.
Use an arbitrary property with underscores for spaces, such as [clip-path:polygon(50%_0,100%_100%,0_100%)], together with sizing and colour classes like w-[40px] h-[30px] bg-[#4F98FB].
Related: Clip-path generator, CSS tooltip generator, CSS masks and shapes, CSS border generator, CSS box model guide.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.