CSSで三角をつくる

CSSでボックスのかどっこに三角表示させたいとの要望があったのでメモです。

HTML

<div class="sankaku_block">
  <div class="sankaku_border"><div class="sankaku"></div></div>
</div>

CSS

.sankaku_block {
  border: 1px solid #000;
  width: 300px;
  height: 300px;
  position: relative;
}
.sankaku_border {
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  position: absolute;
  right: 0;
  top: 0;

}
.sankaku{
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top: 10px solid #00f;
  border-right: 10px solid #00f;
  border-bottom: 10px solid #f00;
  border-left: 10px solid #f00;
}