<div class="triangle"></div>

<div class="triangle_02"></div>
.triangle{
  width: 0;
  height: 0;
  border-top: 50px solid #F0897F;
  border-right: 50px solid #f6da69;
  border-bottom: 50px solid #b2ce54;
  border-left: 50px solid #6aa7cd;
}

.triangle_02{
  width: 0;
  height: 0;
  margin-top: 10px;
  
  border-top: 50px solid transparent;
  border-right: 50px solid  transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #F0897F;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.