CSSで円を描き，内側にテキストを入れる

2019年5月15日 HTML&CSS

円をかいて，中に文字を入れるとはこのような絵のこと．

上
左
中央
右
下

中の文字の位置指定のポイント

CSS は以下のようになる．
円は position: relative と相対指定にして，中の文字は position: absolute で絶対指定とする．

translateX(-50%) は文字の位置が指定した位置からになってしまうので，文字の中心を指定するために使っている．(縦方向の場合は translateY を使っている．)

CSS は以下のようにする．

.circle {
  position: relative;
  border-radius: 50%;
  border: 2px solid #F9F;
}
.c120 {
  height: 120px;
  width: 120px;
}
.circle span {
  position: absolute;
}
.ctop {
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}
.cleft {
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
}
.ccenter {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cright {
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
}
.cbottom {
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
}

.circle {

position: relative;

border-radius: 50%;

border: 2px solid #F9F;

}

.c120 {

height: 120px;

width: 120px;

}

.circle span {

position: absolute;

}

.ctop {

top: 0%;

left: 50%;

transform: translateX(-50%);

}

.cleft {

top: 50%;

left: 0%;

transform: translateY(-50%);

}

.ccenter {

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.cright {

top: 50%;

right: 0%;

transform: translateY(-50%);

}

.cbottom {

bottom: 0%;

left: 50%;

transform: translateX(-50%);

}

HTML は以下のようになる．

<div class="circle c120">
  <span class="ctop">上</span>
  <span class="cleft">左</span>
  <span class="ccenter">中央</span>
  <span class="cright">右</span>
  <span class="cbottom">下</span>
</div>

上

左

中央

右

下

</div>

円の中にグラデーションで色指定

グラデーションにしたい場合は以下のように

.gradF9F {
  background: radial-gradient(circle, #FEF, #F9F);
}

.gradF9F {

background: radial-gradient(circle, #FEF, #F9F);

}

radial-gradient を使う．circle が指定してあるクラスに gradF9F を追加．

上
左
中央
右
下

楕円を描きたい場合

楕円にしたい場合は以下のように

.e120 {
  height: 120px;
  width: 240px;
}

.e120 {

height: 120px;

width: 240px;

}

円のサイズを変更する．c120 を e120 に変更．

上
左
中央
右
下