cssでborderを使わず三角形を描写する #CSS

CSSで三角形を作るといえばborderを利用したものが有名だけどサイズの計算とか扱いとかがちょっとめんどいので普通のdivとかの背景を三角形にしたくなった。した。
普通にwidth/heightを設定するだけでかってに伸縮してくれるのがいいところで、底辺が100%の三角形とか、width:autoのような挙動をする三角形を手軽に作れる。

css

.bottom{
    background:
      linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/50% 100%;
}
.top{
    background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/50% 100%;
}
.left{
    background:
      linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat bottom left/100% 50%,
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/100% 50%;
}
.right{
    background:
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 50%,
      linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat bottom right/100% 50%;
}
.topRight{
    background:
      linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%
}
.topLeft{
    background:
      linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%
}
.bottomRight{
    background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%
}
.bottomLeft{
    background:
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/100% 100%
}

装飾コードを外すとこんなかんじ。
対応ブラウザはIE9～、泥4.4以降のはず。たぶん。
思い出したらきちんとmixinにする。