CSS-only check mark

by MoonScript

HTML

<div class="check_mark"></div>

SCSS

.check_mark {
  position: relative;
  background-color: #fff;
  border: 1px solid green;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  &::before, &::after {
    content: '';
    position: absolute;
    background-color: green;
    border-radius: 1px;
    height: 2px;
  }
  &::before {
    width: 10px;
    top: 20px;
    left: 6px;
    transform: rotate(45deg);
  }
  &::after {
    width: 22px;
    top: 14px;
    left: 8px;
    transform: rotate(-60deg);
  }
}