Skip to content

Instantly share code, notes, and snippets.

@noellesteegs
Created December 10, 2019 09:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save noellesteegs/be3ed60e47aff349e8468937d2203de1 to your computer and use it in GitHub Desktop.
Save noellesteegs/be3ed60e47aff349e8468937d2203de1 to your computer and use it in GitHub Desktop.
Style WooCommerce price on single product pages into a star burst shape
body.single-product p.price {
color: #FFFFFF;
line-height: 80px; /* vertically aligns the price within the star */
font-size: 1.375rem;
}
#burst-12 {
background: #FA7268;
width: 80px;
height: 80px;
text-align: center;
position: relative;
}
#burst-12:before,
#burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: #FA7268;
z-index: -1;
}
#burst-12:before {
transform: rotate(30deg);
}
#burst-12:after {
transform: rotate(60deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment