Learn two reliable ways to draw a clean, scalable CSS heptagon. Use the live preview below, then copy one of the methods to your project.
Live Preview: Heptagon
Method 1: Using clip-path (CSS-Only)
/* Regular heptagon using CSS clip-path (equal angular steps) */
.heptagon {
width: 150px;
/* Keep it square if you only set width or height */
aspect-ratio: 1 / 1;
background: #cd5454;
/* Regular 7-gon points */
-webkit-clip-path: polygon(50% 0%, 89.09% 18.83%, 98.75% 61.13%, 71.69% 95.05%, 28.31% 95.05%, 1.25% 61.13%, 10.91% 18.83%);
clip-path: polygon(50% 0%, 89.09% 18.83%, 98.75% 61.13%, 71.69% 95.05%, 28.31% 95.05%, 1.25% 61.13%, 10.91% 18.83%);
/* Center the element horizontally */
display: block;
margin-left: auto;
margin-right: auto;
}Method 2: Using an Inline SVG as a Background
/* Heptagon rendered by an SVG polygon embedded via a data URI */
.heptagon-svg {
width: 150px;
height: 150px;
/* Fully percent-encoded SVG for robustness */
background:
url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cpolygon%20fill=%22%23cd5454%22%20points=%2250,0%2089.09,18.83%2098.75,61.13%2071.69,95.05%2028.31,95.05%201.25,61.13%2010.91,18.83%22/%3E%3C/svg%3E')
no-repeat center / contain;
/* Center the element horizontally */
display: block;
margin-left: auto;
margin-right: auto;
}How This Works
clip-path clips the element to the path you define. With polygon(), you provide a list of points that form a regular seven-sided shape (equal angular steps), and the element’s box is visually trimmed to that polygon. This is lightweight, responsive, and doesn’t require extra markup.
The SVG method draws the heptagon as a vector polygon and uses it as a background image. It’s pixel-perfect at any size, and you can keep all styling in CSS while the shape comes from the SVG path. Note: a background image doesn’t clip the element’s children; add a clip-path if you also want content clipped.
How to Center Content Inside a Heptagon
The easiest way to center text or icons inside is to use Flexbox or Grid on the heptagon element so its children align in the middle.
Method 1: Use CSS Flexbox
.heptagon {
display: flex;
justify-content: center;
align-items: center;
}Method 2: Use CSS Grid
.heptagon {
display: grid;
place-items: center;
}When to Use Each Shape Method
Use clip-path for a pure CSS, easy-to-tweak shape that scales with percentages and supports clipping of inner content. Choose the SVG background for absolute consistency across renderers or when you prefer managing the points in an SVG workflow; remember that a CSS background itself isn’t accessible to assistive tech and won’t clip inner content.
Quick Customizations
Change the fill by updating background: #cd5454 (clip-path method) or the SVG fill color in the data URI.
For a crisp, non-blurred border, either add an SVG stroke on the polygon or use a wrapper (or sibling) layer with the same clip-path, slightly larger, behind the shape. filter: drop-shadow(…) is great for a soft glow but does not produce a sharp border.
/* Option A: crisp border via wrapper pseudo-element (behind the inner shape) */
/* Markup:
<div class="wrapper">
<div class="heptagon"></div>
</div>
*/
.wrapper {
position: relative;
width: 150px;
aspect-ratio: 1;
/* Center horizontally if needed */
margin-left: auto;
margin-right: auto;
}
/* The border layer sits on the wrapper, so it actually paints behind the inner .heptagon */
.wrapper::before {
content: "";
position: absolute;
inset: -3px; /* border thickness */
background: white; /* border color */
-webkit-clip-path: polygon(50% 0%, 89.09% 18.83%, 98.75% 61.13%, 71.69% 95.05%, 28.31% 95.05%, 1.25% 61.13%, 10.91% 18.83%);
clip-path: polygon(50% 0%, 89.09% 18.83%, 98.75% 61.13%, 71.69% 95.05%, 28.31% 95.05%, 1.25% 61.13%, 10.91% 18.83%);
}
.heptagon {
position: relative;
width: 100%;
aspect-ratio: 1;
background: #cd5454;
-webkit-clip-path: polygon(50% 0%, 89.09% 18.83%, 98.75% 61.13%, 71.69% 95.05%, 28.31% 95.05%, 1.25% 61.13%, 10.91% 18.83%);
clip-path: polygon(50% 0%, 89.09% 18.83%, 98.75% 61.13%, 71.69% 95.05%, 28.31% 95.05%, 1.25% 61.13%, 10.91% 18.83%);
}
/* Option B: crisp border via SVG stroke */
.heptagon-svg-border {
width: 150px; height: 150px;
background:
url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%3E%3Cpolygon%20fill=%22%23cd5454%22%20stroke=%22%23ffffff%22%20stroke-width=%224%22%20points=%2250,0%2089.09,18.83%2098.75,61.13%2071.69,95.05%2028.31,95.05%201.25,61.13%2010.91,18.83%22/%3E%3C/svg%3E')
no-repeat center / contain;
}
/* Soft edge (not crisp): */
.heptagon {
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}Accessibility & SEO
If the heptagon conveys meaning, prefer inline SVG so it’s exposed to assistive technologies. Add a <title> (or aria-label) directly on the SVG. A CSS background image is not announced by screen readers even if you add role=”img” to the element.
<svg
class="heptagon-icon"
viewBox="0 0 100 100"
role="img"
aria-labelledby="heptagonTitle"
xmlns="http://www.w3.org/2000/svg">
<title id="heptagonTitle">Decorative heptagon</title>
<polygon fill="#cd5454" points="50,0 89.09,18.83 98.75,61.13 71.69,95.05 28.31,95.05 1.25,61.13 10.91,18.83"/>
</svg>For data URIs in CSS, percent-encode special characters (at minimum #, spaces, and quotes) or use base64 for maximum robustness. Also ensure sufficient color contrast for any text placed inside the shape.