SOURCE

<div class="a">
  <div class="top-left-triangle"></div>
  <div class="top-right-triangle"></div>
  <br/>
  <div class="bottom-left-triangle"></div>
  <div class="bottom-right-triangle"></div>
  <br/>
  <div class="triangle-complete"></div>
  <div class="square"></div>
 <!--  <div class="square triangle-complete"></div> -->
  <div class="square top-left-triangle top-right-triangle bottom-left-triangle bottom-right-triangle"></div>
  </div>
<p>acde</p>
<p id=a>abc</p>

.a div{display: inline-block;}
.a {
  text-align: left; //居左
}
.bottom-left-triangle {
	width: 0;
	height: 0;
	border-right: 100px solid #FF5722;
	border-bottom: 100px solid transparent;
}
.top-left-triangle {
	width: 0;
	height: 0;
	border-top: 100px solid transparent;
  border-right: 100px solid #00aabb;
}
.top-right-triangle {
	width: 0;
	height: 0;
	border-top: 100px solid transparent;
  border-left: 100px solid #E91E63;
}
.bottom-right-triangle {
	width: 0;
	height: 0;
	border-top: 100px solid #CC27E3;
  border-right: 100px solid transparent;
}
.triangle-complete{
  width:0;
  height:0;
  margin: 0 auto;
  border-top:solid 100px #F44336;
	border-left:solid 100px #00aabb;
	border-right: solid 100px #9C27B0;
	border-bottom:solid 100px #E91E63;
}
.square{
  width:100px;
  height:100px;
  background-color:transparent;
}
#a{margin:0 auto;color:red}