CSS SWITCH

box.css

/*
 * <div class="face top"></div>
 * <div class="face left"></div>
 * <div class="face right"></div>
 */
.face {
  position: absolute;
  overflow: hidden;
}
.top {
  width: 98px;
  height: 98px;
  top: 0;
  left: 45px;
  color: #fc0000;
  background: #fff;
  border-style: solid;
  border-color: #fe5d62;
  border-width: 1px 0 0 1px;
  -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
  -moz-transform: rotate(45deg) skew(-15deg, -15deg);
  -ms-transform: rotate(45deg) skew(-15deg, -15deg);
  -o-transform: rotate(45deg) skew(-15deg, -15deg);
  transform: rotate(45deg) skew(-15deg, -15deg);
}
.left {
  width: 100px;
  height: 100px;
  top: 77px;
  left: 0px;
  color: #fff;
  background: #fe0000;
  -webkit-transform: rotate(15deg) skew(15deg, 15deg);      
  -moz-transform: rotate(15deg) skew(15deg, 15deg);      
  -ms-transform: rotate(15deg) skew(15deg, 15deg);      
  -o-transform: rotate(15deg) skew(15deg, 15deg);
  transform: rotate(15deg) skew(15deg, 15deg);      
}
.right {
  width: 100px;
  height: 100px;
  top: 77px;
  left: 89px;
  color: #fff;
  background: #c80000;
  -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
  -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
  -ms-transform: rotate(-15deg) skew(-15deg, -15deg);
  -o-transform: rotate(-15deg) skew(-15deg, -15deg);
  transform: rotate(-15deg) skew(-15deg, -15deg);
}