<h1>Pure CSS close icon</h1>
<div class="header">
  <span class="close big"></span><ul><li>.close<li>.big</ul>
</div><div>
<ul class="variations">
  <li><span class="close hairline"></span><ul><li>.hairline</ul>
  <li><span class="close thick"></span><ul><li>.thick</ul>
  <li><span class="close black"></span><ul><li>.black</ul>
  <li><span class="close heavy"></span><ul><li>.heavy</ul>
  
  <li><span class="close pointy"></span><ul><li>.pointy</ul>
  <li><span class="close thick pointy"></span><ul><li>.pointy<li>.thick</ul>
  <li><span class="close black pointy"></span><ul><li>.pointy<li>.black</ul>
  <li><span class="close heavy pointy"></span><ul><li>.pointy<li>.heavy</ul>
  
  <li><span class="close rounded"></span><ul><li>.rounded</ul>
  <li><span class="close rounded thick"></span><ul><li>.rounded<li>.thick</ul>
  <li><span class="close rounded black"></span><ul><li>.rounded<li>.black</ul>
  <li><span class="close rounded heavy"></span><ul><li>.rounded<li>.heavy</ul>
  
  <li><span class="close blades"></span><ul><li>.blades</ul>
  <li><span class="close blades thick"></span><ul><li>.blades<li>.thick</ul>
  <li><span class="close blades black"></span><ul><li>.blades<li>.black</ul>
  <li><span class="close blades heavy"></span><ul><li>.blades<li>.heavy</ul>
    
  <li><span class="close warp"></span><ul><li>.warp</ul>
  <li><span class="close warp thick"></span><ul><li>.warp<li>.thick</ul>
  <li><span class="close warp black"></span><ul><li>.warp<li>.black</ul>
  <li><span class="close warp heavy"></span><ul><li>.warp<li>.heavy</ul>
    
  <li><span class="close fat"></span><ul><li>.fat</ul>
  <li><span class="close fat thick"></span><ul><li>.fat<li>.thick</ul>
  <li><span class="close fat black"></span><ul><li>.fat<li>.black</ul>
  <li><span class="close fat heavy"></span><ul><li>.fat<li>.heavy</ul>
</ul>
</div>
<small>Pure CSS close icon concept by <a href="https://codepen.io/ndeniche/">Rubén Reyes</a></small>

@import "bourbon";

$blue: #1ebcc5;

body {
  padding: 2rem;
  font-family: Helvetica, sans-serif;
}

div {
  text-align: center;
}

a{
  text-decoration: none;
}

h1{
  color: $blue;
  text-align: center;
  margin: 0 0 50px 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header {
  ul {
    margin-top: 20px;
  }
}

.variations {
  width: 440px;
  display: inline-block;
  margin: 20px 0 0;
  li {
    width: 70px;
    margin: 15px 20px;
    display: inline-block;
    vertical-align: top;
    ul {
      li {
        margin: 0;
        text-align: left;
        display: block;
      }
    }
  }
}

.close{
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  &:hover {
    &::before, &::after {
      background: $blue;
    }
  }

  &::before, &::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #000;
  }
  &::before {
    @include transform(rotate(45deg));
  }
  &::after {
    @include transform(rotate(-45deg));
  }
  &.big {
    @include transform(scale(3));
  }
  &.hairline {
    &::before, &::after {
      height: 1px;
    }
  }
  &.thick {
    &::before, &::after {
      height: 4px;
      margin-top: -2px;
    }
  }
  &.black {
    &::before, &::after {
      height: 8px;
      margin-top: -4px;
    }
  }
  &.heavy {
    &::before, &::after {
      height: 12px;
      margin-top: -6px;
    }
  }
  &.pointy {
    &::Before, &::after {
      width: 200%;
      left: -50%;
    }
  }
  &.rounded {
    &::before, &::after {
      border-radius: 5px;
    }
  }
  &.blades {
    &::before, &::after {
      border-radius: 5px 0;
    }
  }
  &.warp {
    &::before, &::after {
      border-radius: 120% 0;
    }
  }
  &.fat {
    &::before, &::after {
      border-radius: 100%;
    }
  }
}

small {
  display: block;
  padding: 5rem;
  font: .8rem/1 sans-serif;
  color: #777;
  text-align: center;
}
small a { 
  color: $blue; 
  text-decoration: none; 
  border-bottom: 1px solid #ccc; 
}
small a:hover { border-bottom-color: #222; }

/** Pure CSS close icon concept
  * by Rubén Reyes
  */