Skip to content

Instantly share code, notes, and snippets.

@ryndel ryndel/readme.md
Last active Jan 22, 2019

Embed
What would you like to do?
CSS only starburst

CSS only starburst

An html element using CSS only styling to create a starburst - for special offers (for example).

Usage

<div class="starburst">
	<div class="text"> <span class="label">Get something</span> <span class="number">FREE</span> <span class="terms">some terms</span> </div>
</div>

The dimensions used in the CSS are all ems, making it easy to change the overall size of the element and the text inside by changing your base font size (on the body tag for example). This makes it easy to change the size of the element for desktop, mobile etc.

Benefits

CSS only

No background images required.

Credits

HTML/CSS by: Lyndel Thomas @ryndel

Based on the starburst example by Chris Coyier

*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.starburst,
.starburst:before,
.starburst:after,
.starburst .text,
.starburst .text:before,
.starburst .text:after {
height: 13em;
width: 13em;
background-color: #21aabd;
background-color: #94389f;
background-color: green;
}
.starburst:before,
.starburst:after,
.starburst .text:before,
.starburst .text:after {
content: "";
position: absolute;
}
.starburst {
position: relative;
top: 2.5em;
left: 2.5em;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.starburst:before {
top: 0;
left: 0;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.starburst:after {
top: 0;
left: 0;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.starburst .text {
padding: 2em 0em;
height: 13em;
position: absolute;
bottom: 0;
right: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}
.starburst .text:before {
top: 0;
left: 0;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.starburst .text:after {
top: 0;
left: 0;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
.starburst .text span {
position: relative;
z-index: 100;
display: block;
text-align: center;
color: #ddd;
font: 1em/1.4em Sans-Serif;
}
.starburst .text span.label {
padding-top: .5em;
font-size: 1.4em;
text-transform: uppercase;
}
.starburst .text span.number {
font-weight: bold;
font-size: 5em;
line-height: 1em;
color: #fff;
text-transform: uppercase;
}
.starburst .text span.terms {
font-size: 1.2em;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS only starburst</title>
<link rel="stylesheet" href="starburst.css">
</head>
<body>
<div class="starburst">
<div class="text"> <span class="label">Get something</span> <span class="number">FREE</span> <span class="terms">some terms</span> </div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.