CSS | 扇形(Cuarter circle、Circle sector)の作り方

2021-06-17CSS 図形デザイン,CSS

CSSで扇形を作成する方法

CSSで扇形、クォーターサークルを作成する方法を紹介しています。

扇形の作り方

CSSのborderプロパティを使った扇形の作成方法です。

扇形と紹介していますが、このサンプルコードの場合、作成可能なのは円の4分の1(クォーターサークル)になります。

See the Pen CSS Cquarter circle by yochans (@yochans) on CodePen.

HTMLにはそれぞれ向きの違う扇形を作成するためのdivタグを追加します。

<div class="cquarter-circle-1"></div>
<div class="cquarter-circle-2"></div>
<div class="cquarter-circle-3"></div>
<div class="cquarter-circle-4"></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;
}

扇の向きは「border-radius」の方向で調節しています。

cquarter-circle-1border-top-left-radius
cquarter-circle-2border-top-right-radius
cquarter-circle-3border-bottom-left-radius
cquarter-circle-4border-bottom-right-radius

自由度の高い向きを指定したい場合、transformプロパティのrotate()を親要素に指定します。

下記の場合、45度左回りに回転します。

transform: rotate(-45deg);

2021-06-17CSS 図形デザイン,CSS

Posted by Yousuke.U