Pixel Pin Pure CSS

index.html

<div class="container">
  <div class="pin"></div>  
</div>

pixel-pin-pure-css.markdown

Pixel Pin Pure CSS

Using pure css to create a pixel bowling pin.

A Pen by Conner on CodePen.

License.

style.scss

/*name $elements*/
$pin: white;
$stripe: red;

html {
  height: 100%;
}
body {
  padding: 0;
  background: #202B33;
}

/*start shaping*/

.container, .pin {
  position: absolute;
}

.container {
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 50px;
}

.pin {
  background: $pin;
  height: 10px;
  width: 10px;
  left: 35px;
  top: 0px;
  box-shadow: 0px 10px 0 rgba($pin, 1), 10px 0px 0 rgba($pin, 1), 10px 10px 0 rgba($pin, 1), 5px -10px 0 rgba($pin, 1), 0px 20px 0 rgba($stripe, 1), 10px 20px 0 rgba($stripe, 1), 0px 30px 0 rgba($pin, 1), 10px 30px 0 rgba($pin, 1), -5px 40px 0 rgba($pin, 1), 0px 40px 0 rgba($pin, 1), 10px 40px 0 rgba($pin, 1), 15px 40px 0 rgba($pin, 1), -5px 50px 0 rgba($pin, 1), 0px 50px 0 rgba($pin, 1), 10px 50px 0 rgba($pin, 1), 15px 50px 0 rgba($pin, 1), -5px 60px 0 rgba($pin, 1), 0px 60px 0 rgba($pin, 1), 10px 60px 0 rgba($pin, 1), 15px 60px 0 rgba($pin, 1), -5px 70px 0 rgba($pin, 1), 0px 70px 0 rgba($pin, 1), 10px 70px 0 rgba($pin, 1), 15px 70px 0 rgba($pin, 1), -5px 80px 0 rgba($pin, 1), 0px 80px 0 rgba($pin, 1), 10px 80px 0 rgba($pin, 1), 15px 80px 0 rgba($pin, 1), 0px 90px 0 rgba($pin, 1), 10px 90px 0 rgba($pin, 1),
}