How to Make a Pentagon with CSS

Learn two reliable ways to draw a crisp CSS pentagon: a modern clip-path polygon and a classic triangle-plus-rectangle border trick. Copy the snippets below and customize them in seconds.

Live Preview: Pentagon

Method 1: Using clip-path (Polygon)

.pentagon {
  width: 140px;
  height: 140px;
  background: #cd5454;
  /* Regular-style pentagon pointing up */
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  /* Optional: center the block */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Method 2: Rectangle + CSS Triangle (Borders)

.pentagon-borders {
  position: relative;
  width: 120px;          /* body width */
  height: 70px;          /* body height */
  background: #cd5454;   /* body color */
  /* Optional: center the block */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Triangle peak creates the top point of the pentagon */
.pentagon-borders::before {
  content: "";
  position: absolute;
  left: 0;
  top: -60px;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 60px solid #cd5454; /* same color as body */
}

How This Works

The clip-path method masks a simple rectangle using a five-point polygon path, giving you a scalable, resolution-independent pentagon that’s easy to resize with width/height. It keeps the element’s box intact, so placing content inside is straightforward.

The border method stacks a rectangle (the body) with a CSS triangle (the peak) via a pseudo-element. It’s widely supported and requires no advanced features, but shaping is less precise and you’ll manage two pieces (element + pseudo-element).

How to Center Content Inside a Pentagon

The easiest way to center text or icons inside the pentagon is to use Flexbox or Grid on the shape element.

Method 1: Use CSS Flexbox

.pentagon {
  width: 140px;
  height: 140px;
  background: #cd5454;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;           /* visible text */
  text-align: center;
}

Method 2: Use CSS Grid

.pentagon {
  width: 140px;
  height: 140px;
  background: #cd5454;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
}

When to Use Each Shape Method

Use clip-path for precise, scalable pentagons that can easily host centered content and respond well to size changes. Use the border-based method for broad browser support without clip-path, or when you prefer building shapes from simple border triangles, understanding it involves pseudo-elements and offers less geometric precision.

Quick Customizations

Change the color by updating background or border colors (e.g., background: #cd5454).

Adding an outline around a clip-path pentagon: box-shadow is clipped by clip-path, so a ring like 0 0 0 2px won’t appear outside the shape. Instead, use one of these:

  • Wrap or duplicate the element: place a slightly larger element behind it with the same clip-path and your outline color to simulate a stroke.
  • Use SVG: draw a polygon and apply stroke for a true, controllable outline.
  • For a soft glow/halo, use filter: drop-shadow(…), which follows the clipped outline (note: no spread parameter, so it’s not a precise uniform stroke).

Accessibility & SEO

If the pentagon is decorative, add aria-hidden=”true”. If the shape conveys meaning and is purely graphical, give it an appropriate role and accessible name, for example: role=”img” with aria-label, or use an actual <img>/SVG with alt text.