CSS　基本的な形の図形の作り方　コピペでも使える

CSSで三角形、丸、台形など様々な図形の作り方を紹介していきます。特に三角形は意外と使うのに作り方がわからない人も多いと思います。コピペで使えるようにまとめて行こうと思います。

基本的な図形の作り方

正方形（四角形）

これはとても簡単ですね。widthとheightを設定してbackground-colorで背景色を加えるだけです。

.square {
  width: 50px;
  height: 50px;
  background: #55A4A0;
}

長方形

widthかheightの値をどちらか大きくするだけです。

.rectangle {
  width: 70px;
  height: 50px;
  background: #55A4A0;
}

角の丸い四角形（長方形）

border-radiusで5pxなどと加えれば作れます。値を大きくすれば角が完全に丸くなるので、よくボタンにも使われる図形が完成しますね。

.rectangle {
  width: 70px;
  height: 50px;
  background: #55A4A0;
  border-radius: 20px;
  //border-radius: 50px;
}

角によって違う丸みをつける方法

border-radiusは４つの角をそれぞれ変更できます。角の左上から時計回りに値を変更できます。

.rectangle{
  width: 200px;
  height: 100px;
  border-radius: 10px 20px 30px 40px;
  // 左上、右上、右下、左下の順
  background: #55A4A0;
}

border-radiusの値を２つにすることで、左上と右下、右上と左下を同じ数値で変更することも出来ます。ちょうど対角線上の角ですね。

.rectangle{
  width: 200px;
  height: 100px;
  border-radius: 10px 30px;
  // 左上と右下、右上と左下
  background: #55A4A0;
}

楕円

長方形にborder-radiusの値を50％にすると楕円が作れます。先ほどと同じように４つの角の丸みを変更することも出来ます。

.ellipse{
  width: 100px;
  height: 200px;
  border-radius: 50%;
  background: #55A4A0;
}

こちらは４つの角がそれぞれ違う大きさの丸みになっています。

.ellipse{
  width: 200px;
  height: 100px;
  border-radius: 10% 20% 30% 40%;
  // 左上、右上、右下、左下の順
  background: #55A4A0;
}

円形

正方形にborder-radiusで50px以上にすればキレイな円形が出来ます。

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: #55A4A0;
}

三角形

三角形は周りの線（border）を利用します。三角形の作り方は少し複雑なので今回は簡単に説明します。borderは上下左右にborder-leftなどを使って設定できますよね。もしwitdhとheightを無し（０）で設定するとこのような形が出来ます。わかりやすく、それぞれのborderの色変えておきますね。このように４つの三角形が見えると思います。

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px; 
  border-color: red green #55A4A0 orange;
}

あとはいらない３つの三角形をtransparentで透明にすれば三角形が完成するというわけです。

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px; 
  border-color: transparent transparent #55A4A0 transparent;
}

色を付けるborderを変更することで、横を向いた三角形や逆三角形を作ることが出来ます。border-colorの色の位置を変えているだけです。

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px; 
  border-color: #55A4A0 transparent transparent transparent;
}

もし簡単に三角形を作りたい方はこのサイトがおすすめです。好きな大きさ向き、色などを右側の表示を確認しながら簡単に三角形を作ることが出来ます。

http://apps.eky.hk/css-triangle-generator/ja

正三角形

正三角形の１辺の長さを電卓を出して計算しないといけないので、先程のサイトで作るのがおすすめです。

.equilateral-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 43.3px 25px; 
  //square root of 3 / 2 * (border-left-width(25px) + border-right-width(25px))
  border-color: transparent transparent #55A4A0 transparent;
}

その計算式コード内にも式を書いて置きましたが、２分のルート３を２辺のwidthの合計で掛ければ出せます。上の三角形だと、２辺のwidthの合計が５０pxなのでそれを２分のルート３で掛けています。式は簡単ですが、少しめんどくさいですね。

台形

中央の四角形の左右にborderで作った三角形がくっついています。borderの値を変更すれば左右に長さを変更できます。

.trapezoid {
  width: 30px;
  border-bottom: 40px solid #55A4A0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  height: 0;
}

ひし形

三角形に::after（疑似要素）で作った逆三角形をそれぞれをつなげています。position: absoluteでそれぞれの三角形の位置を調整する必要があります。もし三角形の大きさを変えたら、topとleftの数値を変えてください。よく見るとわかると思いますが、辺のwidthと同じ数字を入れればいいので意外とシンプルです。

.diamond {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 43.3px 25px;
  border-color: transparent transparent #55A4A0 transparent;
  position: relative;
  top: -43.3px;
}

.diamond::after {
  content: "";
  position: absolute;
  left: -25px;
  top: 43.3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 43.3px 25px 0 25px;
  border-color: #55A4A0 transparent transparent transparent;
}

五角形

上に三角形、下に台形という形になっています。これも大きさを確認しながら位置を変更する必要がありますね。

.pentagon {
  position: relative;
  width: 54px;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: #55A4A0 transparent;
}

.pentagon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -85px;
  left: -18px;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent #55A4A0;
}

この記事に少しずつCSSで作った図形を更新していく予定です。

初めての学ぶHTMLとCSSにおすすめです。スマートフォンにも対応したレスポンシブデザインも学べます。

リンク