A CodePen by Mark Michon. Rotated Squares

index.html

<div class="logo">
  <div class="pencil"></div>
</div> 

style.scss

@import "compass";
body {
  padding: 50px;
}

.logo {
  display: block;
  width: 100px;
  height: 100px;
  background-color: #facade;
  position: relative;
  transform: rotate(-45deg);
}

.logo:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  display: block;
  left:50px;
  top:50px;
  z-index:2;
}

.logo:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: white;
  display: block;
  left:50px;
  top:50px;
  z-index:4;
}

.pencil {
  width:0;
  height:0;
  position: absolute;
  border:20px solid transparent;
  border-left: 20px solid black;
  transform: rotate(45deg);
  left: 80px;
  top: 80px;
  z-index: 5;
  border-radius: 20px;
}