<div class="triangle"><p style="text-align: center">sample</p></div>
$color-blue: #82D7FF;
$color-pink: #FF82A5;
$color-green: #82FF90;
$color-red: #FF9082;

$color-top: rgba($color-pink, .7);
$color-right: rgba($color-green, .7);
$color-bottom: rgba($color-red, .7);
$color-left: rgba($color-blue, .7);

.triangle {
  width: 200px;
  border-top: 20px solid $color-top;
  border-right: 20px solid $color-right;
  border-bottom: 20px solid $color-bottom;
  border-left: 20px solid $color-left;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.