Skip to content

Instantly share code, notes, and snippets.

@jnous
Created March 3, 2015 13:56
Show Gist options
  • Save jnous/393d4a2b711fb3329e73 to your computer and use it in GitHub Desktop.
Save jnous/393d4a2b711fb3329e73 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="container">
<div id="burst-12">
<p class="offer">39€</p>
</div>
</div>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Toolkit (v2.7.0)
// ----
@import "toolkit";
.container {
position: relative;
margin: 1rem;
}
.offer {
position: relative;
@include vertical-center(25%);
transform: rotate(-10deg);
z-index: 1;
color: black;
font-size: 2rem;
}
#burst-12 {
background: gold;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: gold;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
.container {
position: relative;
margin: 1rem;
}
.offer {
position: relative;
top: 25%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
transform: rotate(-10deg);
z-index: 1;
color: black;
font-size: 2rem;
}
#burst-12 {
background: gold;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: gold;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
<div class="container">
<div id="burst-12">
<p class="offer">39€</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment