Free Online CSS Shape Generator, Triangles, Arrows and Bubbles
Build a shape out of one element and copy the CSS, including the pseudo-element where one is needed. Border triangles and arrows in any direction, circles, ovals, pills and squircles, speech bubbles with a tail you can place, and simple stars, all previewed as the real shape.
Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.
Why a triangle made of borders works
The corners of a border are mitred, and that diagonal is the shape.
Give an element four thick borders in four different colours and you get four trapeziums, not four rectangles. That is because adjacent borders meet on a diagonal: the browser mitres the join, exactly as a picture frame is cut at 45 degrees, so the boundary between the top border and the left border runs corner to corner.
Now shrink the element's content box to nothing with
width: 0; height: 0. The four trapeziums lose their short parallel edge and become
four triangles meeting at the centre. Make three of them transparent and leave one
coloured, and a single triangle is all that remains:
.triangle-up{
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 90px solid #7c3aed; /* the visible one */
}The two transparent side borders set the base width,
half each, and the coloured border sets the height. The triangle points away from the coloured
border, which is why a triangle pointing up is made with border-bottom. That
reversal is the single most confusing thing about the trick, and it is the reason this page
asks which way the shape should point rather than which border to colour.
How to Make a Shape in Pure CSS
A few steps, and nothing is uploaded.
What to Know About CSS Shapes
Including why a triangle made of borders works at all.
clip-path handles stars, hexagons, chevrons and anything asymmetric, accepts percentage coordinates so it can be responsive, and is far easier to read six months later. Use borders for small fixed tooltip tails and clip-path for everything larger.
::before or ::after, which means the element must not be a replaced element such as an img or an input, because those cannot have generated content. It also means the shape is two painted pieces, so a shadow applied to the box will not follow the tail.
Key Features & Capabilities
What this tool does, and what it deliberately does not.
About the CSS Shape Generator
Every shape on this page is one HTML element with no image and no SVG behind it. Some of them are obvious once you know the rule, like a circle from border-radius: 50%. Others are older tricks that survive because they are still the shortest way to get the job done: a triangle built entirely out of borders is four lines of CSS and needs no extra markup, which is why every tooltip tail on the web is made that way.
The hard part of a generator for this is not the arithmetic but the preview. A speech bubble tail and an arrow stem are pseudo-elements, and you cannot set a pseudo-element from an inline style, so the page writes its generated CSS into a real <style> element on the page and lets the browser apply it. That means the preview is the actual shape produced by the actual rule, including the ::after, rather than a drawing that approximates it.
The output is the whole block, pseudo-element included, with a class name you can set. Where a shape is better done another way the page says so rather than pretending otherwise: stars are made with clip-path, not with stacked triangles, and the notes are explicit about when to abandon the border trick entirely. The shapes are a fixed set of nine; this is not a freeform shape editor, and the clip-path generator is the tool for that.
Frequently Asked Questions
Borders, pseudo-elements, clip-path and when to use an SVG.
box-shadow follows the rectangular border box rather than the visible wedge. For an outlined triangle, stack a slightly larger triangle in the outline colour behind a smaller one. For a shadow, use filter: drop-shadow() on the element, since a filter follows the painted pixels.clip-path: polygon() takes percentage coordinates so the shape can scale with its container, and it reads as a list of corners rather than as a puzzle. Borders remain the better choice for small fixed tooltip and dropdown tails, where the shape is a few pixels and never changes size.img, an input and other replaced elements have no ::before or ::after, so use a div or a span. The other common cause is overflow: hidden on the bubble or an ancestor, which crops the tail because the tail sits outside the box.