CSS Shapes

Q: How do you make a triangle in CSS?

The classic way is the border trick: give an element a width and height of 0, set one border to a solid colour and the two borders next to it to transparent. Where the borders meet they form diagonal edges, so only a triangle is visible. A modern alternative is clip-path: polygon(50% 0, 100% 100%, 0 100%) on an element with a normal width, height and background.

Q: Should I use clip-path or borders to make CSS shapes?

clip-path is usually easier to read and adjust: the element keeps its real width and height, it can have a background image or gradient, and any polygon is possible. The border trick works in every browser ever made and is still handy for small arrows and tooltip tails. clip-path is supported in all current browsers.

Q: Can I add text inside a CSS shape?

Yes, for shapes built with a background, border-radius or clip-path, such as circles, polygons and speech bubbles. Shapes made with the border trick have a width and height of 0, so there is no room for content. Note that clip-path also clips the text, so keep text away from the edges.

Q: Can I put a border or shadow around a clip-path shape?

Not directly: clip-path cuts off borders and box-shadow along with everything else. Instead, wrap the shape in a parent and use filter: drop-shadow() on the parent, which follows the clipped outline. For an outline, stack two clipped elements, the outer one slightly larger.

Here you’ll find a collection of geometric shapes created entirely with pure CSS, without images or SVG. Each one shows a different technique: border-radius for curves, the border trick for triangles, clip-path for polygons and stars, and pseudo-elements, transforms and gradients for the more complex shapes.

Every shape works in all current browsers. Pick a colour to recolour the whole collection, filter by type, then copy the CSS and HTML for the shape you need.

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee

#2563eb

Square

Basic

#square {
  width: 140px;
  height: 140px;
  background: #2563eb;
}

Rectangle

Basic

#rectangle {
  width: 160px;
  height: 90px;
  background: #2563eb;
}

Circle

Basic

#circle {
  width: 140px;
  height: 140px;
  background: #2563eb;
  border-radius: 50%;
}

Oval

Basic

#oval {
  width: 200px;
  height: 100px;
  background: #2563eb;
  border-radius: 50%;
}

Egg

Basic

#egg {
  width: 126px;
  height: 180px;
  background: #2563eb;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Semicircle

Basic

#semicircle {
  width: 160px;
  height: 80px;
  background: #2563eb;
  border-radius: 80px 80px 0 0;
}

Quarter Circle

Basic

#quarter-circle {
  width: 120px;
  height: 120px;
  background: #2563eb;
  border-top-left-radius: 100%;
}

Ring

Basic

#ring {
  width: 140px;
  height: 140px;
  border: 22px solid #2563eb;
  border-radius: 50%;
  box-sizing: border-box;
}

Up Triangle

Triangles

#up-triangle {
  width: 0;
  height: 0;
  border-bottom: 120px solid #2563eb;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

Down Triangle

Triangles

#down-triangle {
  width: 0;
  height: 0;
  border-top: 120px solid #2563eb;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

Left Triangle

Triangles

#left-triangle {
  width: 0;
  height: 0;
  border-right: 100px solid #2563eb;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

Right Triangle

Triangles

#right-triangle {
  width: 0;
  height: 0;
  border-left: 100px solid #2563eb;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

Triangle Top Left

Triangles

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 120px solid #2563eb;
  border-right: 120px solid transparent;
}

Triangle Top Right

Triangles

#triangle-topright {
  width: 0;
  height: 0;
  border-top: 120px solid #2563eb;
  border-left: 120px solid transparent;
}

Triangle Bottom Left

Triangles

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 120px solid #2563eb;
  border-right: 120px solid transparent;
}

Triangle Bottom Right

Triangles

#triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 120px solid #2563eb;
  border-left: 120px solid transparent;
}

Equilateral Triangle

Triangles

/* height = width × 0.866 */
#eq-triangle {
  width: 0;
  height: 0;
  border-bottom: 104px solid #2563eb;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

Trapezium

Polygons

#trapezium {
  width: 80px;
  height: 0;
  border-bottom: 80px solid #2563eb;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

Parallelogram

Polygons

#parallelogram {
  width: 130px;
  height: 75px;
  background: #2563eb;
  transform: skew(20deg);
}

Diamond

Polygons

#diamond {
  width: 100px;
  height: 100px;
  background: #2563eb;
  transform: rotate(45deg);
}

Pentagon

Polygons

#pentagon {
  width: 140px;
  height: 133px;
  background: #2563eb;
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

Hexagon

Polygons

/* height = width × 0.866 */
#hexagon {
  width: 160px;
  height: 139px;
  background: #2563eb;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

Octagon

Polygons

#octagon {
  width: 140px;
  height: 140px;
  background: #2563eb;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%,
    70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
}

Chevron

Polygons

#chevron {
  width: 140px;
  height: 90px;
  background: #2563eb;
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%, 30% 50%);
}

Arrow

Polygons

#arrow {
  width: 160px;
  height: 100px;
  background: #2563eb;
  clip-path: polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%);
}

Cross

Polygons

#cross {
  width: 120px;
  height: 120px;
  background:
    linear-gradient(#2563eb 0 0) center / 36px 100% no-repeat,
    linear-gradient(#2563eb 0 0) center / 100% 36px no-repeat;
}

Five Point Star

Stars

#five-point-star {
  width: 150px;
  height: 143px;
  background: #2563eb;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
    50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

Six Point Star

Stars

#six-point-star {
  position: relative;
  width: 0;
  height: 0;
  margin-bottom: 30px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #2563eb;
}
#six-point-star::after {
  content: "";
  position: absolute;
  top: 30px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 80px solid #2563eb;
}

Twelve Point Star

Stars

#twelve-point-star {
  position: relative;
  width: 100px;
  height: 100px;
  background: #2563eb;
}
#twelve-point-star::before,
#twelve-point-star::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #2563eb;
  transform: rotate(30deg);
}
#twelve-point-star::after {
  transform: rotate(-30deg);
}

Heart

Symbols

#heart {
  position: relative;
  width: 140px;
  height: 115px;
}
#heart::before,
#heart::after {
  content: "";
  position: absolute;
  top: 0;
  left: 70px;
  width: 70px;
  height: 115px;
  background: #2563eb;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

Speech Bubble

Symbols

#speech-bubble {
  position: relative;
  width: 140px;
  height: 90px;
  background: #2563eb;
  border-radius: 12px;
}
#speech-bubble::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -24px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid #2563eb;
  border-bottom: 13px solid transparent;
}

Crescent Moon

Symbols

#crescent {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 28px 14px 0 0 #2563eb;
}

Pacman

Symbols

#pacman {
  width: 0;
  height: 0;
  border: 60px solid #2563eb;
  border-right-color: transparent;
  border-radius: 50%;
}

Yin Yang

Symbols

#yin-yang {
  width: 140px;
  height: 140px;
  border: 1px solid #2563eb;
  border-radius: 50%;
  background:
    radial-gradient(25% 25% at 50% 25%, #2563eb 24%, #fff 26% 99%, #0000 101%),
    radial-gradient(25% 25% at 50% 75%, #fff 24%, #2563eb 26% 99%, #0000 101%),
    conic-gradient(#2563eb 50%, #fff 0);
}

Quartered Circle

Symbols

#quartered-circle {
  width: 0;
  height: 0;
  border: 60px solid #2563eb;
  border-left-color: #facc15;
  border-right-color: #facc15;
  border-radius: 50%;
}

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee

About CSS Shapes

Most of these shapes use one of four techniques. Once you know them, you can build almost any shape yourself:

border-radius rounds the corners of a box. 50% gives a circle or oval, and different horizontal and vertical radii (the / syntax) give shapes like the egg.
The border trick uses an element with no width or height. Its borders meet at diagonal lines, so making some of them transparent leaves a triangle. Try the CSS Triangle Generator to make your own.
clip-path cuts an element down to a polygon, circle or ellipse. It is the easiest way to make pentagons, hexagons, stars and arrows. Design your own with the CSS Clip Path Generator.
Pseudo-elements and transforms add extra pieces with ::before and ::after, then rotate or skew them into place, as in the heart and the twelve point star.

Every shape on this page is drawn from the exact CSS shown in its code block, so what you see is what you copy. The shapes use IDs to keep the examples short; in a real project you may prefer a class so you can reuse the shape more than once on a page.

Frequently Asked Questions

How do you make a triangle in CSS?

The classic way is the border trick: give an element a width and height of 0, set one border to a solid colour and the two borders next to it to transparent. Where the borders meet they form diagonal edges, so only a triangle is visible. A modern alternative is clip-path: polygon(50% 0, 100% 100%, 0 100%) on an element with a normal width, height and background.

Should I use clip-path or borders to make CSS shapes?

clip-path is usually easier to read and adjust: the element keeps its real width and height, it can have a background image or gradient, and any polygon is possible. The border trick works in every browser ever made and is still handy for small arrows and tooltip tails. clip-path is supported in all current browsers.

Can I add text inside a CSS shape?

Yes, for shapes built with a background, border-radius or clip-path, such as circles, polygons and speech bubbles. Shapes made with the border trick have a width and height of 0, so there is no room for content. Note that clip-path also clips the text, so keep text away from the edges.

Can I put a border or shadow around a clip-path shape?

Not directly: clip-path cuts off borders and box-shadow along with everything else. Instead, wrap the shape in a parent and use filter: drop-shadow() on the parent, which follows the clipped outline. For an outline, stack two clipped elements, the outer one slightly larger.

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee

Notifications

CSS Analyzer & Stylesheet Stats

CSS Difference Checker

Duplicate CSS Remover & Merger

CSS Box Model Visualizer

Remove Empty Lines

Unused CSS Finder - Command Line Version

CSS Logical Properties Converter

Unused CSS Finder

CSS Skeleton Loader Generator

CSS Validator

CSS Position Visualizer

CSS Shapes

About CSS Shapes

Frequently Asked Questions

Sponsors