<div class="box a">sample_1</div>
<div class="box">sample_2</div>
<p>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
div {
  display: inline-block;
  width: 0px;
  height: 0px;
}
.box {
  border-top:  50px solid blue;
  border-right: 50px solid red;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}
.box1 {
  border-top: 50px solid blue;
  border-right: 50px solid transparent;
/*   border-bottom: 50px solid green; */
  border-left: 50px solid transparent;
}
.box2 {
  border-top: 50px solid transparent;
  border-right: 50px solid red;
  border-bottom: 50px solid transparent;
/*   border-left: 50px solid yellow; */
}
.box3 {
/*   border-top: 50px solid blue; */
  border-right: 50px solid transparent;
  border-bottom: 50px solid green;
  border-left: 50px solid transparent;
}
.box4 {
  border-top: 50px solid transparent;
/*   border-right: 50px solid red; */
  border-bottom: 50px solid transparent;
  border-left: 50px solid yellow;
}

.a {
  width: 50px;
  height: 50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.