旧gaaamiiのブログ

間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

CSSで■、●、▲を描く

CSS CodePen

CSSでいろいろ描けるようになっておきたいなという気持ちだけは以前からあったものの、これまでちゃんとキャッチアップできていませんでした。まずは簡単なものからということで、●と▲と■をCSSで描いて、その実装方法について書いておきたいと思います1。

■

これは、widthとheightと背景色を指定するだけですね。

●

●も簡単で、直径の半分をborder-radiusに指定すると円になります。

.circle {
  --diameter: 200px;
  width: var(--diameter);
  height: var(--diameter);
  border-radius: calc(var(--diameter / 2));
}

▲

▲はちょっと難しかったです。CSS triangleで検索してみると、以下のジェネレータが出てきました。

生成されたCSSは以下のようになっています。

width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #007bff transparent;

なるほど（わからん）。

よくわからないので、詳しく見ていきます。

border-width

まずは、MDNでborder-widthのページを見てみます。

border-widthに値を4つ指定すると、 border-width: 上 右 下 左の指定になるみたいです。しかしそれでもなぜ上の記述、border-width: 0 0 200px 200px で三角形になるのか理解できません。色の指定を border-color: #007bff;にすればただの正方形になるので、border-colorの指定が肝なのでしょう。

border-color

MDNには、border-colorに4つの値を指定したときの例が載っています。なるほど、色をつけてみるとわかりやすいです。borderは上下左右指定すると、それぞれが台形になるんですね。

それぞれ別の色を指定すれば、きれいに三角形ができるまでの過程がわかりやすいので、アニメーションさせてみました。

See the Pen Animation of making triangle by gaaamii (@gaaamii-the-sasster) on CodePen.

それぞれのborder-widthをboxの幅の半分に指定したところ、boxの中身が全部borderで埋め尽くされ、きれいに三角形で四等分されました。なお、border-box: 0にしておかないとbox内の領域をそのまま保とうとしてしまうので、boxに大きいborderが付くだけになってしまうので注意です。

表示したい三角形の部分以外をtransparentにしていた

こうやって見た上だと、先程のborder-colorの指定 transparent transparent #007bff transparent; が理解できます。下のborderだけ色を付けほかは透明にすることで、色をつけたところの三角形だけが表示される感じになっていたのです。

さらに、伸ばしたい辺のborder-widthをboxと同じ長さに、かつ向かい合う辺のborder-widthを0に、それ以外の辺はboxと半分の長さにすることで、いい感じにboxの幅と同じ長さの底辺の二等辺三角形が描けました。

まとめ

今回、CodePenで書きながら一通り確認しました。書いたものも一応公開してるので興味ある人は見てみてください。

See the Pen basic shapes (●▲■) drawn by css by gaaamii (@gaaamii-the-sasster) on CodePen.

三角形の描き方を理解するのに思ったより時間がかかりましたが、とりあえずは●▲■の描き方を覚えられたので、次はこれを組み合わせていろんな形の表現に挑戦していきたいと思います。調べたらElmのロゴをCSSで描いてる人がいた2ので、自分でもいずれチャレンジしてみたいです。

  1. この記事ではIE11などの古いブラウザについてはあまり考慮していないので、仕事の使ったりする場合は caniuse.com で確認するなどしてからにしてください 🙏↩

  2. https://www.youtube.com/watch?v=ZNBc1BsJZnQ↩