【初心者でもわかる】CSSで水滴を再現

#どうも7noteです。大きさも自由に変更可能な水滴をCSSで再現。

ソース

index.html

<div class="drop"></div>

style.css

.drop {
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(transparent 30%, #CDCDCD 80%);
  box-shadow: 2px 2px 2px #737373;
  position: relative;
}
.drop::before {
  content: '';
  width: 15%;
  height: 15%;
  background: radial-gradient(rgba(255,255,255,0.8) 50%, transparent);
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  top: 10%;
  left: 25%;
}

widthとheightの大きさを変えれば様々な大きさの水滴が作れます。

おそまつ！

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