CSS | 色々な図形を描画するCSSサンプルコード集

2020-07-12CSS,CSS デザイン

色々な図形を描画するCSSサンプルコード集

CSSを使って色々な図形を描画するサンプルコード集になります。

CSSで図形の中にテキストなどを含める場合の注意点

CSSの図形要素内にテキストなどを含める場合は、基本的にそれらがpadding込みで要素のサイズを上回ると図形自体のサイズしていも可変することに注意します。

解決策としては以下の方法などがあります。

  • paddingや文字サイズ、文字数を調節して図形の範囲内に収める
  • position指定で影響を与えないようにする
  • text-overflowなどはみ出る部分を非表示にする

正円（Perfect Circle）

正円（せいえん）・楕円（だえん）やいびつな円をCSSで作成・描画したサンプルです。

See the Pen CSS Design Circle by yochans (@yochans) on CodePen.

<div class="perfect-circle"></div>
.perfect-circle{
  margin: 10px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #0091EA;
}

楕円（Ellipse）

See the Pen CSS Design Ellipse by yochans (@yochans) on CodePen.

<div class="ellipse"></div>
.ellipse{
  margin: 10px;
  width: 100px;
  height: 150px;
  border-radius: 50%;
  background: #43A047;
}

いびつな円（Distorted Circle）

See the Pen CSS Design Circle by yochans (@yochans) on CodePen.

<div class="distorted-circle"></div>
.distorted-circle{
	margin: 10px;
	width: 150px;
	height: 150px;
	border-radius: 50% 70% 50% 80%;/* 左上、右上、右下、左下 */
	background: #FF5252;
}

四角形（Square）

正方形・長方形などの四角形なCSSサンプルコードです。

See the Pen CSS Design Square by yochans (@yochans) on CodePen.

CSSで正方形や長方形を表示するには要素の幅（width）と高さ（height）と背景色を指定します。

CSSの基本として、marginは要素の外側の余白、paddingは要素の内側の余白となっています。

<div class="square"></div>
.square{
	margin: 10px;
	width: 150px;
	height: 150px;
	background: #0091EA;
}

台形（Trapezoid）

See the Pen CSS Design Trapezoid by yochans (@yochans) on CodePen.

CSSで台形を作成する方法のひとつとして、borderを使った簡単な方法があります。

表示サンプルで実際に色が付いている部分はborderの部分で、背景色（background）は指定していません。

要素自体の高さを0にすることで、台形の位置が本来の要素の位置から下にずれてしまうのを防げます。
台形の要素に中身がある場合は、beforeやafterなどの疑似要素とpositionを利用します。

また、backgroundに仮の色を指定することでborderがどういう変化をしているのか確認しやすくなると思います。

<div class="trapezoid"></div>
.trapezoid{
	margin: 0 10px;
	width: 90px;/* 幅 */
	height: 0px;/* y位置 */
	border-bottom: 150px solid #43A047;/* 高さ */
	border-left: 30px solid transparent;/* 左側の角度 */
	border-right: 30px solid transparent;/* 右側の角度 */
	/*   background: #000; */
}

また、台形を逆さにするには、border-bottomで設定していたボーダーをborder-topに差し替えることで表現可能です。

<div class="upside-down-trapezoid"></div>
/* 逆さバージョン */
.upside-down-trapezoid{
	margin: 0 10px;
	width: 90px;/* 幅 */
	height: 0px;/* y位置 */
	border-top: 150px solid #FF5252;/* 高さ */
	border-left: 30px solid transparent;/* 左側の角度 */
	border-right: 30px solid transparent;/* 右側の角度 */
	/*   background: #000; */
}

平行四角形（Parallel Quadrangle）

See the Pen CSS Design Parallel Quadrangle by yochans (@yochans) on CodePen.

CSSで簡単に平行四角形を描画できるtransformのskewXを使った方法を紹介します。
skewは要素に水平方向（skewX）または垂直方法（skewY）にゆがめる変形効果を与えます。

<div class="parallel-quadrangle-a"></div>
<div class="parallel-quadrangle-b"></div>
.parallel-quadrangle-a{
	margin: 0 40px;
	width: 120px;
	height: 120px;
	transform: skewX(25deg);
	background: #EF6C00;
}

.parallel-quadrangle-b{
	margin: 0 40px;
	width: 120px;
	height: 120px;
	transform: skewX(-25deg);
	background: #43A047;
}

ひし形（Rhombus）

See the Pen CSS Design Rhombus by yochans (@yochans) on CodePen.

CSSでひし形（ダイヤ）をデザインする簡単な方法です。

単純に四方の辺の長さが同じひし形であれば正方形をtransformのrotateで回転させることで描画が可能です。

四方の辺の長さを調節する場合は、rotateと一緒にskewを使って調節します（サンプルのタイプB）。

<div class="rhombus-a"></div>
<div class="rhombus-b"></div>
.rhombus-a{
	margin: 50px 30px;
	width: 100px;
	height: 100px;
	transform: rotate(45deg);
	background: #EF6C00;
}

.rhombus-b{
	margin: 50px 30px;
	width: 100px;
	height: 100px;
	transform: rotate(45deg) skew(15deg,15deg);
	background: #43A047;
}

正三角形（Equilateral Triangle）

See the Pen CSS Design Equilateral triangle by yochans (@yochans) on CodePen.

CSSでborderを使って正三角形を描画するサンプルコードです。

以下のサンプルにborderのbottomには、三角形の高さ、rightとleftには辺の長さが入ると考えておけば簡単です。

<div class="equilateral-triangle"></div>
.equilateral-triangle{
	margin: 10px;
	height: 0px;
	border-bottom: 150px solid #43A047;/* 高さ */
	border-right: 86.6px solid transparent;/* 左辺の長さ */
	border-left: 86.6px solid transparent;/* 右辺の長さ */
}

正三角形で高さ（border-bottom）を基準にした辺の長さ（border-right、border-left）は「(2√3)*高さ/2/3」で計算可能です。

また、辺の長さを基準にする場合は「(2√3)*辺の長さ/2」で算出できると思います。

(2√3)*150/2/3 – Google 検索
(2√3)*86.6/2 – Google 検索

二等辺三角形（Isosceles Triangle）

See the Pen CSS Design Isosceles Triangle by yochans (@yochans) on CodePen.

<div class="isosceles-triangle"></div>
.isosceles-triangle{
	margin: 10px;
	height: 0px;
	border-bottom: 150px solid #FF5252;/* 高さ */
	border-right: 50px solid transparent;/* 左辺の長さ */
	border-left: 50px solid transparent;/* 右辺の長さ */
}

五角形（Pentagon）

See the Pen CSS Design Pentagon by yochans (@yochans) on CodePen.

<div class="pentagon"></div>
.pentagon{
	position: relative;
	width: 100px;
	height: 0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #0091EA;
	margin: 80px 20px;
}

.pentagon::before{
	content: "";
	position: absolute;
	top: -175px;
	left: -50px;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 75px solid #0091EA;
}

星型（Star）

See the Pen CSS Design Star by yochans (@yochans) on CodePen.

3つの三角形を作成して重ねることで星型を描画するCSSのサンプルコードです。
調節・確認用に色違いの三角形を重ねたバージョンも表示しておきます。

<div class="star"></div>
.star{
	position: relative;
	margin: 50px 20px;
	width: 0px;
	height: 0px;
	border-bottom: 50px solid #EF6C00;
	border-right: 75px solid transparent;
	border-left: 75px solid transparent;
	transform: rotate(-37deg);
}

.star::before{
	content: "";
	position: absolute;
	top: 0;
	left: -75px;
	border-bottom: 50px solid #EF6C00;
	border-right: 75px solid transparent;
	border-left: 75px solid transparent;
	transform: rotate(-71.5deg);
}

.star::after{
	content: "";
	position: absolute;
	top: 0;
	left: -75px;
	border-bottom: 50px solid #EF6C00;
	border-right: 75px solid transparent;
	border-left: 75px solid transparent;
	transform: rotate(71.5deg);
}

半月・半円（Half Moon）

See the Pen CSS Design Half Moon by yochans (@yochans) on CodePen.

CSSのborder-radiusだけで半月を描画するサンプルコードです。

上下左右の向きをサンプルとして表示していますが、角度を調節する場合は、transformのrotateを利用した方が簡単かもしてません。

<div class="half-moon-a"></div>
<div class="half-moon-b"></div>
<div class="half-moon-c"></div>
<div class="half-moon-d"></div>
.half-moon-a{
	margin: 10px;
	width: 75px;
	height: 150px;
	border-radius: 75px 0 0 75px;
	background: #0091EA;
}

.half-moon-b{
	margin: 10px;
	width: 75px;
	height: 150px;
	border-radius: 0 75px 75px 0;
	background: #FF5252;
}

.half-moon-c{
	margin: 10px;
	width: 150px;
	height: 75px;
	border-radius: 0 0 75px 75px;
	background: #43A047;
}

.half-moon-d{
	margin: 10px;
	width: 150px;
	height: 75px;
	border-radius: 75px 75px 0 0;
	background: #EF6C00;
}

三日月（Crescent Moon）

See the Pen CSS Design Half Moon by yochans (@yochans) on CodePen.

box-shadowを使って三日月を描画するCSSサンプルです。

このサンプルは要素本体は透過となっており、box-shadow側のみの色で表現しています。

box-shadowは、横軸の位置、縦軸の位置、広がり、太さで指定します。

<div class="crescent-moon"></div>
.crescent-moon{
	margin: 20px 50px;
	width: 120px;
	height: 120px;
	background-color: transparent;
	border-radius: 50%;
	box-shadow: -30px 0px 0px 20px #0091EA;/* 横軸の位置、縦軸の位置、広がり、太さ */
}

ハート型（Heart）

See the Pen CSS Design Heart by yochans (@yochans) on CodePen.

CSSでハート型を作成するサンプルコードです。

色々な方法があると思いますが、beforeとafterの疑似要素を使ったこの方法が一番簡単かと思います。

border-radiusで丸みの調節をすることで、ある程度はハートのスタイルを変更可能です。

サンプルでは、色を別けた２つの疑似要素を調節用に置いておきます。

<div class="heart"></div>
.heart{
	width: 120px;/* 他の要素との重なり回避用 */
	position: relative;
}

/* 左側 */
.heart::before{
	content: "";
	position: absolute;
	left: 60px;/* x位置 */
	top: 0;/* y位置 */
	width: 60px;/* 幅 */
	height: 100px;/* 高さ */
	background: #FF5252;/* 色 */
	border-radius: 100px 60px 0 0;/* 丸み */
	transform: rotate(-45deg);/* 角度調整 */
	transform-origin: 0 100%;/* 回転の基準点 */
}

/* 右側 */
.heart::after {
	content: "";
	position: absolute;
	left: 0;/* x位置 */
	top: 0;/* y位置 */
	width: 60px;/* 幅 */
	height: 100px;/* 高さ */
	background: #FF5252;/* 色 */
	border-radius: 60px 100px 0 0;/* 丸み */
	transform: rotate(45deg);/* 角度調整 */
	transform-origin: 100% 100%;/* 回転の基準点 */
}

ダイヤモンド（Diamond）

See the Pen CSS Design Diamond by yochans (@yochans) on CodePen.

<div class="diamond"></div>
.diamond{
	position: relative;
	margin: 10px;
	width: 100px;
	height: 0;
	border-style: solid;
	border-color: transparent transparent #FF5252 transparent;
	border-width: 0 50px 50px 50px;
	box-sizing: content-box;
}

.diamond::after {
	content: "";
	position: absolute;
	top: 50px;
	left: -50px;
	border-style: solid;
	border-color: #FF5252 transparent transparent transparent;
	border-width: 120px 100px 0 100px;
}

十字・✗印（Cross）

See the Pen CSS Design Cross by yochans (@yochans) on CodePen.

<div class="cross"></div>
.cross{
	margin: 0 50px;
	position: relative;
	width: 30px; /* 縦棒の幅 */
	height: 120px; /* 縦棒の長さ */
	background: #EF6C00; /* 縦棒の色 */
}

.cross::after {
	content: "";
	position: absolute;
	top: 45px; /* 横棒のy位置 */
	left: -45px; /* 横棒のX位置 */
	width: 120px; /* 横棒の長さ */
	height: 30px; /* 横棒の幅 */
	background: #EF6C00; /* 横棒の色 */
}

また角度を調節することで✗印にすることもできます。

.batu{
	margin: 0 50px;
	position: relative;
	width: 30px; /* 縦棒の幅 */
	height: 120px; /* 縦棒の長さ */
	background: #EF6C00; /* 縦棒の色 */
	transform: rotate(-45deg); /* 角度 */
}

.batu::after {
	content: "";
	position: absolute;
	top: 45px; /* 横棒のy位置 */
	left: -45px; /* 横棒のX位置 */
	width: 120px; /* 横棒の長さ */
	height: 30px; /* 横棒の幅 */
	background: #EF6C00; /* 横棒の色 */
}

追加したい図形メモ：矢印、卍、ドーナツ型、無限マーク、※マーク、郵便記号など・・・

2020-07-12CSS,CSS デザイン

Posted by Yousuke.U