CSS | 色々な図形を描画するCSSサンプルコード集
CSSを使って色々な図形を描画するサンプルコード集になります。
ここにない個別記事で図形も紹介しているかもしれません。
https://1-notes.com/category/css/css-shape-design/- 1. 図形の中にテキストなどを含める場合の注意点
- 2. 正円（Perfect Circle）
- 3. 楕円（Ellipse）
- 4. いびつな円（Distorted Circle）
- 5. 四角形（Square）
- 6. 台形（Trapezoid）
- 7. 平行四角形（Parallel Quadrangle）
- 8. ひし形（Rhombus）
- 9. 正三角形（Equilateral Triangle）
- 10. 二等辺三角形（Isosceles Triangle）
- 11. 五角形（Pentagon）
- 12. 六角形（Hexagon）
- 13. 星型（Star）
- 14. 半月・半円（Half Moon）
- 15. 三日月（Crescent Moon）
- 16. ハート型（Heart）
- 17. ダイヤモンド（Diamond）
- 18. 十字・✗印（Cross）
- 19. 無限マーク（Infinity）
- 20. 扇形（Cuarter circle、Circle sector）
- 21. 五芒星（Pentagram）
- 22. 六芒星（Hexagram）
- 23. たまご型（Egg）
図形の中にテキストなどを含める場合の注意点
サンプルではできる限り、要素サイズの維持を考慮していますが、中には要素そのものがサイズを持たないサンプルもあります。
そういったサンプルの図形要素内にテキストなどの要素を含める場合は、レイアウトの崩れなどに注意して下さい。
解決策としては以下の方法などがあります。
- before、afterの空きがあれば、図形部分は移動する
- サイズのある親要素を持たせて図形の配置はposition指定にする
- 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 {
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 {
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 {
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 {
width: 90px; /* 幅 */
height: 0px; /* y位置 */
border-bottom: 150px solid #43A047; /* 高さ */
border-left: 30px solid transparent; /* 左側の角度 */
border-right: 30px solid transparent; /* 右側の角度 */
}また、台形を逆さにするには、border-bottomで設定していたボーダーをborder-topに差し替えることで表現可能です。
<div class="upside-down-trapezoid"></div>.upside-down-trapezoid {
width: 90px; /* 幅 */
height: 0px; /* y位置 */
border-top: 150px solid #FF5252; /* 高さ */
border-left: 30px solid transparent; /* 左側の角度 */
border-right: 30px solid transparent; /* 右側の角度 */
}台形の作り方の詳細やPolygonを使った台形の作り方などもまとめています。
https://1-notes.com/css-shape-trapezoid-design/平行四角形（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>.parallel-quadrangle-a {
width: 120px;
height: 120px;
transform: skewX(25deg);
background: #EF6C00;
}<div class="parallel-quadrangle-b"></div>.parallel-quadrangle-b{
margin: 0 40px;
width: 120px;
height: 120px;
transform: skewX(-25deg);
background: #43A047;
}平行四辺形作成の詳細やPolygonを使った作成方法も紹介しています。
ひし形（Rhombus）
See the Pen CSS Design Rhombus by yochans (@yochans) on CodePen.
CSSでひし形（ダイヤ）をデザインする簡単な方法です。
単純に四方の辺の長さが同じひし形であれば正方形をtransformのrotateで回転させることで描画が可能です。
四方の辺の長さを調節する場合は、rotateと一緒にskewを使って調節します（サンプルのタイプB）。
<div class="rhombus-a"></div>.rhombus-a {
width: 100px;
height: 100px;
transform: rotate(45deg);
background: #EF6C00;
}<div class="rhombus-b"></div>.rhombus-b {
width: 100px;
height: 100px;
transform: rotate(45deg) skew(15deg,15deg);
background: #43A047;
}ひし形の作り方、Polygonを使ったひし形など。
正三角形（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 {
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 {
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;
}
.pentagon::before {
content: "";
position: absolute;
top: -175px;
left: -50px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 75px solid #0091EA;
}五角形、正五角形の作り方や、Polygonを使った作成方法などもあります。
六角形（Hexagon）
See the Pen CSS Hexagon by yochans (@yochans) on CodePen.
<div class="hexagon-1"></div>.hexagon-1 {
position: relative;
width: 150px;
height: 130px;
}
.hexagon-1::before {
content: "";
width: 150px;
position: absolute;
border-bottom: 64.95px solid #3cb371;
border-left: 37.5px solid transparent;
border-right: 37.5px solid transparent;
box-sizing: border-box;
}
.hexagon-1::after {
content: "";
width: 150px;
position: absolute;
top: 64.95px;
border-top: 64.95px solid #3cb371;
border-left: 37.5px solid transparent;
border-right: 37.5px solid transparent;
box-sizing: border-box;
}五角形の詳細、Polygonを使った作成方法など。
星型（Star）
See the Pen CSS Design Star by yochans (@yochans) on CodePen.
3つの三角形を作成して重ねることで星型を描画するCSSのサンプルコードです。
調節・確認用に色違いの三角形を重ねたバージョンも表示しておきます。
<div class="star"></div>.star {
position: relative;
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);
}星型、Polygonを使った星型の作成方法など。
半月・半円（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 {
width: 75px;
height: 150px;
border-radius: 75px 0 0 75px;
background: #0091EA;
}
.half-moon-b {
width: 75px;
height: 150px;
border-radius: 0 75px 75px 0;
background: #FF5252;
}
.half-moon-c {
width: 150px;
height: 75px;
border-radius: 0 0 75px 75px;
background: #43A047;
}
.half-moon-d {
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 {
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;
height: 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%; /* 回転の基準点 */
}
ハートの作り方詳細、pathを使ったハートの作成方法など。
ダイヤモンド（Diamond）
See the Pen CSS Design Diamond by yochans (@yochans) on CodePen.
<div class="diamond"></div>.diamond {
position: relative;
width: 150px;
height: 120px;
}
.diamond::before {
content: "";
width: 100px;
position: absolute;
border-style: solid;
border-color: transparent transparent #1e90ff transparent;
border-width: 0 25px 40px 25px;
box-sizing: content-box;
}
.diamond::after {
content: "";
position: absolute;
top: 40px;
border-style: solid;
border-color: #1e90ff transparent transparent transparent;
border-width: 80px 75px 0 75px;
}ダイヤモンド型の作成方法詳細、Polygonを利用した作成など。
十字・✗印（Cross）
See the Pen CSS Design Cross by yochans (@yochans) on CodePen.
<div class="cross"></div>.cross {
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 {
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; /* 横棒の色 */
}無限マーク（Infinity）
See the Pen CSS Infinity by yochans (@yochans) on CodePen.
<div class="infinity-1"></div>.infinity-1 {
position: relative;
width: 200px;
height: 100px;
}
.infinity-1::before {
content: "";
width: 55px;
height: 55px;
position: absolute;
top: 0;
left: 0;
border: 20px solid #00bfff;
border-radius: 50px 50px 50px 0;
transform: rotate(-135deg);
}
.infinity-1::after {
content: "";
width: 55px;
height: 55px;
position: absolute;
top: 0;
right: 0;
border: 20px solid #00bfff;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
扇形（Cuarter circle、Circle sector）
See the Pen CSS Cquarter circle by yochans (@yochans) on CodePen.
<div class="cquarter-circle-1"></div>.cquarter-circle-1 {
position: relative;
width: 100px;
height: 100px;
}
.cquarter-circle-1::after {
content: "";
position: absolute;
border: solid #20b2aa;
border-width: 100px 100px 0 0;
border-top-left-radius: 100px;
}
.cquarter-circle-2 {
position: relative;
width: 100px;
height: 100px;
}
.cquarter-circle-2::after {
content: "";
position: absolute;
border: solid #20b2aa;
border-width: 100px 100px 0 0;
border-top-right-radius: 100px;
}
.cquarter-circle-3 {
position: relative;
width: 100px;
height: 100px;
}
.cquarter-circle-3::after {
content: "";
position: absolute;
border: solid #20b2aa;
border-width: 100px 100px 0 0;
border-bottom-left-radius: 100px;
}
.cquarter-circle-4 {
position: relative;
width: 100px;
height: 100px;
}
.cquarter-circle-4::after {
content: "";
position: absolute;
border: solid #20b2aa;
border-width: 100px 100px 0 0;
border-bottom-right-radius: 100px;
}
五芒星（Pentagram）
See the Pen CSS | Pentagram（line only） by yochans (@yochans) on CodePen.
<div class="pentagram-1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>.pentagram-1 {
width: 150px;
height: 150px;
position: relative;
top: 5px;
}
.pentagram-1 div {
position: absolute;
width: 50px;
height: 146px;
left: 50px;
top: 2px;
border-left: 2px solid #000;
transform-origin: center;
box-sizing: border-box;
}
.pentagram-1 div:nth-of-type(1) {
transform: rotate(90deg);
}
.pentagram-1 div:nth-of-type(2) {
transform: rotate(162deg);
}
.pentagram-1 div:nth-of-type(3) {
transform: rotate(234deg);
}
.pentagram-1 div:nth-of-type(4) {
transform: rotate(306deg);
}
.pentagram-1 div:nth-of-type(5) {
transform: rotate(378deg);
}
六芒星（Hexagram）
See the Pen CSS | Hexagram（line only） by yochans (@yochans) on CodePen.
<div class="hexagon-1">
<div></div>
<div></div>
<div></div>
</div>.hexagon-1 {
width: 150px;
height: 150px;
position: relative;
}
.hexagon-1 div {
width: 75px;
height: 130px;
position: absolute;
top: 10px;
left: 37.5px;
border-left: 2px solid #000;
border-right: 2px solid #000;
transform-origin: center;
box-sizing: border-box;
}
.hexagon-1 div:nth-of-type(1) {
transform: rotate(30deg);
}
.hexagon-1 div:nth-of-type(2) {
transform: rotate(90deg);
}
.hexagon-1 div:nth-of-type(3) {
transform: rotate(150deg);
}
たまご型（Egg）
See the Pen CSS | Egg by yochans (@yochans) on CodePen.
<div class="egg-1"></div>.egg-1 {
width: 110px;
height: 150px;
border-radius : 80% 80% 80% 80% / 100% 100% 65% 65%;
background-color: #ff7f50;
}