円の描画

HTMLとCSSだけで図形を表示する必要があったのでその覚え書き。円を描画するためには四角形の要素の角に丸みを持たせていくことで描画できる。

・HTML

<div id="circle"></div>

・CSS

#id {
  border: 2px solid #000;
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

表示させると以下のような円が描画される。

 

border-radiusプロパティの値を調整することで、角の丸い四角形を描くことも可能である。

border-radius: 10px;

 

backgroundプロパティの値を変更すれば、図形を塗りつぶすことをできる。

background: #000;

 

このように、border-radiusを使うことでJavaScriptを使わなくても図形の描画ができる。

三角形の描画

三角形の描画には高さと幅のない四角形のborderに幅を持たせることで、描画することが多くあります。図のように対角線のtopの部分だけを表示し、それ以外は透明色を設定しています。

cssでは以下のように書くことができます。

.triangle {
  width: 0px;
  height: 0px;
  border: 30px solid transparent;
  border-top: 30px solid #0ff;
} 

三角形

塗りつぶされた三角形を表示する場合は、このようにCSSを記述し、divタグなどにクラス設定をすることで描画できます。しかし、枠線だけを表示したい場合は、この方法では捧持することができません。SVGやJavaScriptを使えば容易にできると思いますが、今回は塗りつぶされた三角形に背景色と同じ色の三角形で塗りつぶすことで、枠線だけの三角形を描画したいと思います。

<div class="triangle"></div>

.triangle {
　width: 100px;
　text-align: center;
}

.triangle:before {
  content: "";
  vertical-align: middle;
  width: 0px;
  height: 0px;
  border: 30px solid transparent;
  border-top: 30px solid #0ff;
}

.triangle:after {
  content: "";
  position: relative;
  top: -5px;
  left: 50px;
  width: 0px;
  height: 0px;
  border: 20px solid transparent;
  border-top: 20px solid #222;
}

枠のみの三角形