CSSでレスポンシブな正円を作る

試したらできたのでメモ的に。

テーマはCSSで正円を作る、ですが既知のものかもしれず、単に私がしらなかっただけか、あるいは問題ある作り方かもしれませんので、その辺ご留意ください。

実現したいこと

実現したいことは以下の通り。

• CSSでレスポンシブな正円を作る
• なるべくトリッキーなことはしない

2つめのトリッキーかどうかに関しては微妙ですが、記述自体はシンプルです。

サンプル

以下がサンプルです。
適当にブラウザの幅を縮小してもらえれば確認できるはずです。

以下はコードです。

<div class="circle"></div>

.circle {
  position: relative;
  padding: 50%;
  border-radius: 50%;
  background-color: #13bfbb;
}
.circle:before {
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7em;
  height: 1em;
  margin-top: -.5em;
  margin-left: -3.5em;
  content: '疑似要素で表示';
  color: #fff;
}

疑似要素で無理矢理やっていますが、div内にpタグなどをいれて中央配置するなどのほうがよいかと思います。

結び

柔軟性があまりないので微妙な出来映えですが、文字数次第では使えるかもしれません。

うねる円

この記事とは違いますが、CSSのアニメーションを利用すると当サイトのロゴのうようにうねる円も作れます。

• CSSで要素の四隅をうねらせる -ロゴ風編