フロントエンジニアがCSSだけで「サッカーボール」を作る

どうも7noteです。再現シリーズ、サッカーボールをcssだけで作ってみた。

前回：リアルなビー玉を作る

cssだけでサッカーボールを作りました。
前回ビー玉を作成したのですが、今回は5角形が多く入ってくるので、svg使わずcssだけの再現だったためソースが少し長くなってしまいました。
もう少し短くかけたらよかったのですが、現状の精一杯ですね。日々勉強です。

サッカーボールのソース

index.html

<div class="ball">
  <div class="pentagon c"></div>
  <div class="pentagon t"><span></span></div>
  <div class="pentagon tr"><span></span></div>
  <div class="pentagon br"><span></span></div>
  <div class="pentagon bl"><span></span></div>
  <div class="pentagon tl"><span></span></div>
</div>

style.css

.ball {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #666;
  border-radius: 50%;
  background-image: radial-gradient(at 30% 30%,#fff 40%, #bbb);
  box-shadow: 30px 70px 5px -30px rgba(0,0,0,0.3);
  overflow: hidden;
}

.ball .pentagon {
  position: absolute;
  width: 50px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid #000;
}

.ball .pentagon:before {
  position: absolute;
  top: -96px;
  left: -25px;
  width: 0;
  height: 0;
  content: "";
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 46px solid #000;
}


.ball .pentagon.c {
  top: calc(50% + 12px);
  left: 50%;
  transform: translate(-50%,-50%);
}

.ball .pentagon.t {
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotateZ(180deg) rotateX(60deg);
}

.ball .pentagon.tr {
  top: 28%;
  right: -35px;
  transform: rotateZ(252deg) rotateX(60deg);
}

.ball .pentagon.br {
  bottom: 4%;
  right: 16px;
  transform: rotateZ(322deg) rotateX(60deg);
}

.ball .pentagon.bl {
  bottom: 4%;
  left: 16px;
  transform: rotateZ(36deg) rotateX(60deg);
}

.ball .pentagon.tl {
  top: 28%;
  left: -35px;
  transform: rotateZ(108deg) rotateX(60deg);
}

.ball .pentagon.t::after,
.ball .pentagon.tr::after,
.ball .pentagon.br::after,
.ball .pentagon.bl::after,
.ball .pentagon.tl::after{
  content: '';
  width: 1px;
  height: 150px;
  background: #000;
  position: absolute;
  top: -220px;
  left: 50%;
}

.ball .pentagon span {
  width: 120px;
  height: 1px;
  display: inline-block;
  background: #000;
  position: absolute;
  top: -95px;
  left: 45px;
  transform: rotate(-55deg);
}

解説

①　5角形を6つ作成します。中心に1つ配置し、残りを5箇所回りに配置します。位置は...適当です。

②　ボールの縁になる円を描きます。回りに配置した五角形が少しはみ出るくらいの大きさにしておき、overflow: hidden;で円からはみ出た部分は非表示に設定。

③　回りに配置した五角形に疑似要素で線を付けて中心に向けて線を引きます。さらにspanでも線をつくり、これは回りの五角形同士をつなぐ線にします。

④　最後に立体感を出すために、ボール全体に円形グラデーションをかけて、影を適当に配置して完成！

まとめ

イラストデータなどをみて「いけるかな」と思ったのですが想定よりも長くソースをかかないといけなくなってしまったので悔やみます。もう少しスッキリかければよかったのですが。

ただかなり柔軟な発送が必要になるのでcssの練習にはとてもいいかもしれないです。実用性はかなり低いですが・・・

また思いついたものを作っていけたらいいかなと思います。
だれかの参考になれば幸いです。

参考：
https://moru-web.com/?p=102
https://www.kitaguniweb.com/cat-webdesign/2014/p-6043/

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ