[day:12]CSSで三角形と楕円を作る

CSSで三角形と楕円を作る

はじめに

ページ作成のタスクの中で、背景として三角形と楕円を使用することがありました。
普段見慣れている図形でもCSSになると「あれ？どうやって作るんだっけ」となってしまうこともあるかと思います。
今回は一緒にこれらの図形を作っていきましょう！

三角形を作ろう

三角形ってよくデザインで見ますが、いざcssで実装となるとどうやって作るのかと考えてしまいますよね。
今回は一緒に三角形をcssで作ってみましょう！
まずは以下のようにhtmlとcssを記述して四角を用意してみましょう。

<div class="test">三角です</div>

width:            100px;
height:           100px;
background-color: red

かわいい四角形が表示されましたね。
では、この四角形を三角形に変化させてみましょう！

結果的には以下のcssを当てることで三角形が作れます。

.test {
  width:        0;
  height:       0;
  border-style: solid;
  border-width: 100px 100px 0 0;
  border-color: #ff0000 transparent transparent transparent;
}

美しい三角様が出現しました！

作りたい形の三角形を指定することでそのCSSを教えてくれるサイト
[CSS三角形作成ツール])(http://apps.eky.hk/css-triangle-generator/ja)

CSSで三角形を作る仕組みの解説
CSSだけで三角形を作ろう！その1

楕円を作ろう

早速楕円を作ってみましょう！
まずは楕円の元になる四角を用意します。

<div class="test">楕円です</div>

.test {
  width:            400px;
  height:           100px;
  background-color: red;
}

かわいい四角形が表示されました。
ではこれの角を削ぎ落として楕円に加工しちゃいましょう！

行うのはborder-radius: 50%;の一文を加えるだけです。

.test {
  width:            400px;
  height:           100px;
  background-color: red;
  border-radius:    50%;
}

楕円の完成！
たったの一文で完成しました。
デザインを見た時にはどうやるんだっけ？となりそうですが、実に簡単です。