Learn two reliable ways to draw a crisp 5-point star using pure CSS. Below is a live preview, plus copy‑paste snippets, centering tips, and quick customization ideas.
Live Preview: 5-Point Star
Method 1: Using clip-path (Polygon)
/* 5-Point Star with clip-path */
.star {
width: 150px;
aspect-ratio: 1;
background: #cd5454;
clip-path: polygon(
50% 0%,
61.8% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
38.2% 35%
);
/* optional centering of the box itself */
display: block;
margin-left: auto;
margin-right: auto;
}
Method 2: Using Borders and Pseudo-elements
/* 5-Point Star with CSS borders */
.star {
position: relative;
width: 0;
height: 0;
display: block;
margin: 40px auto;
border-right: 50px solid transparent;
border-bottom: 35px solid #cd5454;
border-left: 50px solid transparent;
transform: rotate(35deg);
}
.star::before {
content: "";
position: absolute;
top: -25px;
left: -32px;
width: 0;
height: 0;
border-right: 15px solid transparent;
border-bottom: 40px solid #cd5454;
border-left: 15px solid transparent;
transform: rotate(-35deg);
}
.star::after {
content: "";
position: absolute;
top: 0;
left: -52px;
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 35px solid #cd5454;
border-left: 50px solid transparent;
transform: rotate(-70deg);
}
How This Works
The clip-path method cuts a star silhouette out of a square by tracing a polygon path defined in percentages, making it responsive and easy to scale. The div’s background fills the clipped shape, so you only need one element.
The border method builds triangles from CSS borders and rotates them with transforms. Combining the base element with two pseudo-elements forms the five points of the star, which is handy if you prefer not to use clip-path.
How to Center Content Inside a 5-Point Star
Centering content depends on the method you use:
Clip-path method: use Flexbox or Grid on the star element
With clip-path, the element has real dimensions, so you can center inner content directly. Note: inner content will be visually clipped to the star’s outline.
/* clip-path star: center inner content */
.star {
display: grid;
place-items: center;
}
/* or Flexbox */
.star {
display: flex;
justify-content: center;
align-items: center;
}
Border method: use a wrapper (or prefer clip-path for inner content)
In the border/pseudo-elements method, .star has width: 0; height: 0; its visible shape comes from borders. Flex/Grid centering on .star won’t center inner content because there’s no usable content box. Use a wrapper with real dimensions and overlay the content, or prefer the clip-path method when you need inner content.
<!-- HTML -->
<div class="star-wrap">
<div class="star" aria-hidden="true"></div>
<span class="star-content">A</span>
</div>
/* CSS */
.star-wrap {
position: relative;
width: 150px;
height: 150px;
margin: 40px auto;
}
/* Keep your existing .star triangle rules.
Position/size the star within the wrapper as needed. */
.star-content {
position: absolute;
inset: 0; /* fill wrapper */
display: grid;
place-items: center; /* center text/icon */
pointer-events: none; /* let clicks pass through if needed */
}
When to Use Each Shape Method
Use clip-path for clean, scalable stars that accept background colors, gradients, and easy content centering in a single element. Use the border method when you want to avoid clip-path or need a triangle-based approach, but note it relies on pseudo-elements and isn’t as content-friendly or scalable.
Quick Customizations
Change the color by updating background (clip-path method) or the colored border values (border method) to your brand hex. For a “stroke” effect, wrap the star in a slightly larger clipped element with a contrasting background, or add a soft glow with filter: drop-shadow(…).
Accessibility & SEO
If the star conveys meaning, give it an accessible name with appropriate semantics. For a non-interactive star, add role=”img” and aria-label (e.g., <div class=”star” role=”img” aria-label=”Featured”></div>). If it’s interactive (e.g., a “favorite” control), use a button with an accessible name (e.g., <button class=”star” aria-label=”Add to favorites”></button>). If it’s purely decorative, add aria-hidden=”true”. Also ensure sufficient color contrast against the background.