A Pen by A Non Ymous.

goKLH.markdown

goKLH

A Pen by Anonasaurus Rex on CodePen.

License.

index.html

<div class='wrap'>
  <div class='aperture'>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</div>

style.scss

@import "compass/css3";
.wrap {
  position: relative;
  margin: auto;
  width: 50%;
}

.aperture {
  position: absolute;
  top: 80px;
  margin: auto;
  width: 50%;
}

p {
	width: 0;
	height: 0;
	text-indent: -9999px;
	border-bottom: 100px solid rgba(46,123,28,0.9);
	border-right: 150px solid rgba(0,0,0,0.2);
  position: absolute;
}

p:nth-child(1) {
  -webkit-transform: rotate(0deg);
}

p:nth-child(2) {
  -webkit-transform: rotate(34deg);
  top: -37px;
  left: 40px;
}

p:nth-child(3) {
  -webkit-transform: rotate(68deg);
  top: -55px;
  left: 90px;
}

p:nth-child(4) {
  -webkit-transform: rotate(102deg);
  top: -37px;
  left: 140px;
}

p:nth-child(5) {
  -webkit-transform: rotate(136deg);
  top: -12px;
  left: 190px;
}

p:nth-child(6) {
  -webkit-transform: rotate(170deg);
  top: 43px;
  left: 180px;
}