CSSで扇型の書く方法｜疑似要素

CSSで扇形を描く方法にはいくつかありますが、この記事では、下記３つの実例について紹介します。

1. 要素を直接扇形にする方法
2. 疑似要素で扇形を作る方法
3. 疑似要素で扇形を作る方法とその中に数字を配置する方法

結論ザックリ

扇形をCSSで描く方法は、border-radiusを使います。どの方向を円形にするかは下記の４つのCSSプロパティを利用します。

実例１：要素を直接扇形にする方法

要素を直接扇形にする方法のHTMLとCSSをまとめたCodePenを下に載せておきます。

この方法は、<div>で正方形を作り、その角をborder-radiusで丸めることで扇形を作っています。

See the Pen 扇形｜要素に対して｜sector of a circle by s sim (@s-sim) on CodePen.

扇形のHTML

扇形のHTMLを抜粋したのが下のコードです。単に、<div></div>で正方形を作るイメージです。

<div class="shape01"></div>

扇形のCSS

共通CSS

まず、class属性 ‘shape01’ のdiv要素に対して、widthとheightで正方形を作り、background-colorで色を付けます。

.shape01 {
  width: 100px;
  height: 100px;
  background-color: #000;
}

左上が円形の扇形（border-top-left-radius）

左上が円形の扇形を作る場合にはCSSプロパティ’border-top-left-radius’を使います。サイズは上で指定した正方形の大きさを同じにします。

.shape01{
  border-top-left-radius: 100px;
}

右上が円形の扇形（border-top-right-radius）

右上が円形の扇形を作る場合にはCSSプロパティ’border-top-right-radius’を使います。サイズは上で指定した正方形と同じ大きさにします。

.shape01{
  border-top-right-radius: 100px;
}

左下が円形の扇形（border-bottom-left-radius）

左上が円形の扇形を作る場合にはCSSプロパティ’border-bottom-left-radius’を使います。サイズは上で指定した正方形と同じ大きさにします。

.shape01{
  border-bottom-left-radius: 100px;
}

右下が円形の扇形（border-bottom-right-radius）

左上が円形の扇形を作る場合にはCSSプロパティ’border-bottom-right-radius’を使います。サイズは上で指定した正方形と同じ大きさにします。

.shape01{
  border-bottom-right-radius: 100px;
}

疑似要素で扇形をつくる方法

疑似要素を使って要素の中に扇形をつくる方法は下のCodePenにHTMLとCSSをまとめてあります。

実際に表示がどうなっているのかご確認ください。

See the Pen 扇形｜疑似要素｜sector of a circle by s sim (@s-sim) on CodePen.

疑似要素をつかう扇形のHTML

基本的にHTMLの構造は実例１と同じです。

<div class="shape11"></div>

疑似要素をつかう扇形のCSS

共通のCSS

実例１との違いは、下記のとおりです。

• 疑似要素を使うため、親要素のdivを’position: relative’に設定
• 今回は見やすくするために、親要素の背景色を黒（background-color: #000）に着色

.shape11 {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #000;
  position: relative;
}

右下が円形の扇形（border-bottom-right-radius）

疑似要素の作り方は一般的なものと同じです。

.shape11::before{
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  border-bottom-right-radius: 50px;
  top:0px;
  left:0px;
}

コードの要点を箇条書きにすると次のようになります。

扇形の角丸位置のバリエーションは実例１と同じですので、詳細説明は省略します。具体的なコードを見たい場合には上のCodePenを参照下さい。

疑似要素の扇形内に数字を配置する方法

上の疑似要素の扇形の使い所は様々ですが、よくある使用例として扇形内部に数字を配置する方法を紹介します。

まずは下のCodePenで表示をご確認下さい。

See the Pen 扇形｜疑似要素｜数字入り by s sim (@s-sim) on CodePen.

疑似要素で扇形に数字を配置するHTML

HTMLの構造自体は、上で紹介した実例１や実例２とまったく同じです。

<div class="shape01"></div>

疑似要素で扇形に数字を配置するCSS

親要素のCSS

背景色が黒（#000000）の正方形のCSSの実例２との違いは、’position: relative’の指定です。この要素の中に疑似要素を配置するので当然の措置です。

.shape01{
  width: 100px;
  height: 100px;
  background-color: #000000;
  position: relative;
}

疑似要素｜右下が円形の扇形（border-bottom-right-radius）

疑似要素の扇形の作り方は実例２とまっとく同じです。

/* 扇形 */
.shape01::before{
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  border-bottom-right-radius: 100px;
  top:0px;
  left:0px;
}

疑似要素｜扇形内の数字

一般的な疑似要素の作り方と同じで、特筆すべき点はありません。

/* 数字 */
.shape01::after{
  content: " 01";
  position: absolute;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  color: white;
  top:0.3em;
  left:0.3em;
}