Wayfair Logo

This is a small experiment to make Wayfair logo using HTML and CSS

HTML

<div class='topParentView clearBackground'>
  <div class='innerRectangleView topTransformDiv'>
    <div class='innerSquareView largeInnerSquareView'>
      <div class='innerSquareView shortInnerSquareView triangleLeft topLeftTriangleColor'></div>
      <div class='innerSquareView mediumInnerSquareView topLeftColor'></div>
    </div>
    <div class='innerSquareView largeInnerSquareView'></div>
    <div class='innerSquareView largeInnerSquareView rightTriangularViews'>
      <div class='innerSquareView mediumInnerSquareView bottomRightColor'></div>
      <div class='innerSquareView shortInnerSquareView triangleRight bottomRightTriangleColor'></div>
    </div>
  </div>

  <div class='innerRectangleView negativeRotatedDiv'>
    <div class='innerSquareView largeInnerSquareView'>
      <div class='innerSquareView shortInnerSquareView triangleLeft bottomLeftTriangleColor'></div>
      <div class='innerSquareView mediumInnerSquareView bottomLeftColor'></div>
    </div>
    <div class='innerSquareView largeInnerSquareView centerColor middleViewWidth'></div>
    <div class='innerSquareView largeInnerSquareView rightTriangularViews'>
      <div class='innerSquareView mediumInnerSquareView topRightColor'></div>
      <div class='innerSquareView shortInnerSquareView triangleRight topRightTriangleColor'></div>
    </div>
  </div>
</div>

CSS

.topParentView {
  width: 200px;
  height: 200px;
  position: relative
}

.innerRectangleView {
  width: 240px;
  height: 80px;
}

.floatLeft {
  float: left;
}

.innerSquare {
  float: right;
}

.innerSquareView {
  float: left;
  height: inherit;
}

.shortInnerSquareView {
  width: 26.67px;
}

.largeInnerSquareView {
  width: 80px;
}

.triangleLeft {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-right: 26.67px solid #fdf;
  border-bottom: 40px solid transparent;
}

.triangleRight {
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-left: 26.67px solid #fdf;
  border-bottom: 40px solid transparent;
}

.clearBackground {
  background: white
}

.negativeRotatedDiv {
  -ms-transform: translate(-20px, -20px) rotate(-45deg);
  -webkit-transform: translate(-20px, -20px) rotate(-45deg);
  transform: translate(-20px, -20px) rotate(-45deg);
}

.topTransformDiv {
  -ms-transform: translate(-20px, 60px) rotate(45deg);
  -webkit-transform: translate(-20px, 60px) rotate(45deg);
  transform: translate(-20px, 60px) rotate(45deg);
}

.centerColor {
  background: #592048
}

.topLeftColor {
  background: #AEBD20
}

.topRightColor {
  background: #BCDDB1
}

.bottomLeftColor {
  background: #E6D000
}

.bottomRightColor {
  background: #9A5AA3
}

.topLeftTriangleColor {
  border-right-color: #AEBD20
}

.topRightTriangleColor {
  border-left-color: #BCDDB1
}

.bottomLeftTriangleColor {
  border-right-color: #E6D000
}

.bottomRightTriangleColor {
  border-left-color: #9A5AA3
}

.rightTriangularViews {
  left: 2px;
  position:relative;
}

.mediumInnerSquareView {
  width: 53.54px;
  margin-right: -1px;
  margin-left: -1px;
}