どうも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制作のちょいテク詰め合わせ
↧