아무래도 7note입니다. CSS만으로 몬스터 볼을 만들어 보았습니다.

HTML·CSS의 기본만으로 만든 대신에는 적당히 할 수 있었지만, 더 리얼한 것은 만들 수 있을 것 같다. 음, 어렵다. . .
쓸데없는 행일지도 모르지만 참을 수 있습니다.

index.html

<div class="ball">
  <div class="center"></div>
  <div class="line"></div>
  <div class="bottom"></div>
</div>

style.css

body {
  background: #31962d;
}

.ball {
  width: 200px;
  height: 200px;
  background: radial-gradient(8px 10px at 35% 35%, #FC6661 10px, #D42221 20px, #8E2726 120px);
  position: relative;
  border-radius: 100%;
  box-shadow: -10px 60px 60px -30px rgba(0,0,0,0.6);
}

.center {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}
.center::before {
  content: "";
  width: 50px;
  height: 50px;
  background: #fff;
  border: solid 8px #000;
  position: absolute;
  top: 48%;
  left: 25%;
  border-radius: 100%;
  z-index: 10;
  box-shadow: -1px 2px 2px rgba(0,0,0,0.4);
}
.center::after {
  content: "";
  width: 25px;
  height: 25px;
  background: #fff;
  border: solid 2px #aaa;
  position: absolute;
  top: 58%;
  left: 34%;
  border-radius: 100%;
  z-index: 10;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.line {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 200px;
  height: 130px;
  border-bottom: 68px solid #000;
  border-radius: 100%;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 130px;
  border-bottom: 68px solid #fff;
  border-radius: 100%;
}

감상

검은 선의 좌우에 조금 빨강이 보이고 버리고, 만들기가 달콤하다고 생각하면서도 복잡하게 너무 어쨌든 싫었기 때문에 이번은 눈을 감아 버렸습니다. . .
또한 border로 반원을 만들면 그라데이션이 걸리지 않기 때문에 거기도 앞으로의 과제군요.
또 마음이 향했을 때라도 리벤지할까.

포켓몬 GO의 볼과 비교하면 아직 미세한 부분이 되어 있지 않다는 것을 잘 알 수 있네요.

오마마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】HTML・CSS의 조금 테크 모임