CSS三角形の角度を決めて表示させるSTYLUS MIXIN

みなさん、CSS三角形使ってますか？　ていうかアレ、正式名称とかあるんでしょうかね？　私はあまり使いません。サイズやらイメージが合わないとやらで突っ返されると、この辺の角度かこの辺のサイズかとちまちま1pxずつborder-widthをなぶることになったりして面倒なのです。おとなしくいただいた画像を貼っているほうが気が楽なのです。

動機

と、よくあるリストのマーカー部分の三角形、背景画像にして表示させていたら「そういうのはCSSで〜」とかわけ知り顔で語られたので、どうせなら融通の効くやつを。

融通ポイント1 頂点の角度を決めうちしたい

あると思うんですよ、もう少し鈍角のが、とか尖ってるのが、とか。サイズ感も出しやすいですし、表示させるイメージも掴みやすいですしね。

融通ポイント2 stylusのmixinで

要は使いまわしたい。

こうなった

triangle(color, forward = u, base, d)
  width 0
  height 0
  border-style solid
  w = round(base / 2)
  h = round(w / tan((d / 2)deg))
  if forward == d
    border-width (h)px (w)px
    border-color color transparent transparent
  else if forward == r
    border-width (w)px (h)px
    border-color transparent transparent transparent color 
  else if forward == l
    border-width (w)px (h)px
    border-color transparent color transparent transparent
  else
    border-width (h)px (w)px
    border-color transparent transparent color

ポイント

こちら、想定している三角形のサイズを1/2にして、

w = round(base / 2)

それを底辺に見立てた直角三角形の高さをtan()を使って算出します。文系野郎ですからね、三角関数とかおっかなびっくり使いますよええもう。
参考にしたのはこちら。角度と高さから底辺と斜辺を計算

h = round(w / tan((d / 2)deg))

使い方

triangle() mixinを呼び出して色・向き（上/u 下/d 右/r 左/l）・三角形のサイズ・頂点の角度を指定してやります。向きは指定しないと自動的に上向きになります。ほら、いつだって上向きに生きていきたいじゃありませんか。

.triangle
  triangle(red, d, 40, 60)

は、このようにコンパイルされます。round()している以上厳密性は求め難いですが、だいたいなんとかなっています。

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 20px;
  border-color: #f00 transparent transparent;
}

codepenでざっくり実行できるようにしましたので、いろいろ数値を変えるなどしてお試しください。

最後に

みんなもっとstylus使おうよー。ここ2ヶ月で3人くらいに何それって言われて、結構歴史あるのになんでこんなに知名度ないんですかね。