A decagon is a ten-sided polygon that you can draw cleanly with modern CSS. Below are two reliable techniques plus a live preview and simple ways to center content inside the shape.
Live Preview: Decagon
Method 1: Using clip-path (Polygon)
/* Regular CSS decagon using clip-path */
.decagon {
width: 150px;
height: 150px; /* Or use: aspect-ratio: 1; width: 150px; */
background: #cd5454;
/* Safari prefix for broader support */
-webkit-clip-path: polygon(
50% 0%,
79.4% 9.6%,
97.6% 34.6%,
97.6% 65.4%,
79.4% 90.4%,
50% 100%,
20.6% 90.4%,
2.4% 65.4%,
2.4% 34.6%,
20.6% 9.6%
);
clip-path: polygon(
50% 0%,
79.4% 9.6%,
97.6% 34.6%,
97.6% 65.4%,
79.4% 90.4%,
50% 100%,
20.6% 90.4%,
2.4% 65.4%,
2.4% 34.6%,
20.6% 9.6%
);
/* Center the element */
display: block;
margin-left: auto;
margin-right: auto;
}Method 2: Using CSS Mask (SVG Data URL)
/* Decagon cutout via mask-image using an inline SVG polygon */
.decagon-mask {
width: 150px;
aspect-ratio: 1;
background: #cd5454;
/* Center the element */
display: block;
margin-left: auto;
margin-right: auto;
/* Mask the box to a decagon */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 79.4,9.6 97.6,34.6 97.6,65.4 79.4,90.4 50,100 20.6,90.4 2.4,65.4 2.4,34.6 20.6,9.6' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 79.4,9.6 97.6,34.6 97.6,65.4 79.4,90.4 50,100 20.6,90.4 2.4,65.4 2.4,34.6 20.6,9.6' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}How This Works
clip-path cuts the element to a polygon using percentage coordinates, so the box visually becomes a ten-sided figure while still being a single element you can size and position normally.
The mask method paints only the white polygon area of an inline SVG onto the element, hiding everything else. It’s great when you want a crisp vector edge and works similarly to clip-path, but via masking.
How to Center Content Inside a Decagon
The easiest way is to use Flexbox or Grid on the decagon element so any child (text, icon, etc.) is perfectly centered.
Method 1: Use CSS Flexbox
.decagon {
/* existing decagon styles ... */
display: flex;
justify-content: center;
align-items: center;
color: #fff; /* optional for text contrast */
}Method 2: Use CSS Grid
.decagon {
/* existing decagon styles ... */
display: grid;
place-items: center;
color: #fff; /* optional for text contrast */
}When to Use Each Shape Method
Use clip-path for a lightweight, editable shape with simple CSS and good modern support. Choose the mask approach when you prefer SVG precision, need pixel-crisp edges at any size, or want to swap masks easily; just note that some older browsers may require fallbacks.
Quick Customizations
Change the fill by editing background: #cd5454 to your brand color, and resize with width/height or aspect-ratio.
Outline/stroke options that work around clip-path/mask:
- Thin outline via filter drop-shadow (follows the clipped shape):
.decagon {
/* 1px-ish outline around the polygon */
filter: drop-shadow(0 0 1px currentColor);
color: #222; /* outline color */
}- Simulated border using a pseudo-element behind the shape (crisp, controllable thickness):
.decagon {
position: relative;
background: #cd5454;
/* keep your existing clip-path here */
-webkit-clip-path: polygon(50% 0%, 79.4% 9.6%, 97.6% 34.6%, 97.6% 65.4%, 79.4% 90.4%, 50% 100%, 20.6% 90.4%, 2.4% 65.4%, 2.4% 34.6%, 20.6% 9.6%);
clip-path: polygon(50% 0%, 79.4% 9.6%, 97.6% 34.6%, 97.6% 65.4%, 79.4% 90.4%, 50% 100%, 20.6% 90.4%, 2.4% 65.4%, 2.4% 34.6%, 20.6% 9.6%);
color: #222; /* border color */
}
.decagon::before {
content: "";
position: absolute;
inset: -2px; /* border thickness */
background: currentColor;
-webkit-clip-path: inherit;
clip-path: inherit;
z-index: -1;
}(If you used a mask instead of clip-path, apply the same mask to ::before.)
- Perfect, scalable stroke with inline SVG:
<svg width="150" height="150" viewBox="0 0 100 100" role="img" aria-label="Decagon">
<polygon
points="50,0 79.4,9.6 97.6,34.6 97.6,65.4 79.4,90.4 50,100 20.6,90.4 2.4,65.4 2.4,34.6 20.6,9.6"
fill="#cd5454"
stroke="currentColor"
stroke-width="2"
vector-effect="non-scaling-stroke"
/>
</svg>Accessibility & SEO
If the decagon is decorative, add aria-hidden=”true”; if it conveys meaning, include accessible text nearby or inside the shape for screen readers.