mralexgray/css-starbursts.markdown

## css-starbursts.markdown

      
    Raw
  

              css-starbursts.markdown
            
          
    CSS Starbursts

Left: 12 points and requires only 1 div.
Right: 24 points but requires a nested span.
Forked from Peter Hrynkow's Pen CSS Starbursts.
A Pen by Alex Gray on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
	<meta name="generator" content="BBEdit 10.5" />
  <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="starburst example" id="example-1">Hello</div>

  <div class="starburst example" id="example-2"><span>Bam</span></div>
</body>
</html>

## style.stylus
starburst()
  font 4em/1.4 'Lobster', georgia, serif
  background #202020
  width 2.5em
  height 2.5em
  text-align center
  color #fff
	&,
 	span
		display box
		box-align center
		box-pack center

	span
    width 100%
    height 100%
    background inherit
    transform rotate(45deg)


	&:before,
	&:after,
	& span:before,
	& span:after
		content ""
		position absolute
		top 0
		left 0
		width 100%
		height 100%
		background inherit
		z-index -1
		transform rotate(30deg)

	&:after
		transform rotate(-30deg)
	span
		&:before
			transform rotate(-30deg)
	&
		transform rotate(-45deg)


	// &:after
	// 	transform rotate(30deg)


.example
  // position: absolute;
  // top: 50%;
  margin-top: 1.25em;
  margin-left: 1.25em;

//#example-1
//	display none
//  left 25%

#example-2

	starburst()
	transform rotate(-45deg)

	// transform rotate(-45deg)

	// left 75%
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
	<meta name="generator" content="BBEdit 10.5" />
	<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
	</head>
	<body>
	<div class="starburst example" id="example-1">Hello</div>

	<div class="starburst example" id="example-2"><span>Bam</span></div>
	</body>
	</html>
	starburst()
	font 4em/1.4 'Lobster', georgia, serif
	background #202020
	width 2.5em
	height 2.5em
	text-align center
	color #fff
	&,
	span
	display box
	box-align center
	box-pack center

	span
	width 100%
	height 100%
	background inherit
	transform rotate(45deg)


	&:before,
	&:after,
	& span:before,
	& span:after
	content ""
	position absolute
	top 0
	left 0
	width 100%
	height 100%
	background inherit
	z-index -1
	transform rotate(30deg)

	&:after
	transform rotate(-30deg)
	span
	&:before
	transform rotate(-30deg)
	&
	transform rotate(-45deg)



	// &:after
	// transform rotate(30deg)



	.example
	// position: absolute;
	// top: 50%;
	margin-top: 1.25em;
	margin-left: 1.25em;

	//#example-1
	// display none
	// left 25%

	#example-2

	starburst()
	transform rotate(-45deg)

	// transform rotate(-45deg)

	// left 75%