[CSS] しずくの形（雨粒の形）

こんにちは、素人エンジニアです。

cssだけで、しずくの形（雨粒の形）を作りました。

コピペで使っていただけると嬉しいです。

作り方の手順も書いています！

See the Pen 雨粒の形 by doncha2525 (@doncha2525) on CodePen.

.drop-shape{
  position: relative;
  top:50px;
  width: 50px;
  height: 50px;
  background: blue;
  border-radius: 0% 100% 50% 50%/ 0% 50% 50% 100%;
  transform: rotate(45deg) skew(10deg, 10deg);
}

雨粒(しずく)の作り方

手順としては、このようになっています。

正方形を作る
角を１箇所残して丸める
回転させる
傾斜をつける

一つ一つ説明していきます。

1.正方形を作る

まずは、widthとheightに同じ長さを指定して正方形を作ります。

<div class="square"></div>

.square {
  position: relative;
  width: 50px;
  height: 50px;
  background: blue;
}

2.角を１箇所残して丸める

角を丸めるには、border-radiusを使います。

<div class="square round-angle"></div>

.round-angle {
  border-radius: 0% 100% 50% 50%/ 0% 50% 50% 100%;
}

border-radiusは、指定の仕方で色々な形を作ることができます。

border-radius: 50%;　→　すべての角に設定
border-radius: 20% 50%;　→　対角ごとに設定(右上左下：左上右下)
border-radius: 0　50%　50%　50%;　→　4つ角それぞれに設定
border-radius: 30% / 10%;　→　水平半径/鉛直半径

これを駆使することで、ちょっとしずくみたいな形になりました。

3.回転させる

このままでは傾いていますので、45度回転させます。

<div class="square round-angle rotate"></div>

.rotate {
  transform: rotate(45deg)
}

それっぽくなってきました。

4.傾斜をつける

最後に傾斜をつけます。
傾斜をつけるskewは追加するとtransformのrotateを上書きしてしまうので、セットで指定しましょう。

<div class="square round-angle transform"></div>

.transform {
　transform: rotate(45deg) skew(10deg, 10deg);
}

skewでは、x軸とy軸の傾斜変化を指定しています。

skewX(x軸の傾斜)
skewY(y軸の傾斜)
skew(x軸の傾斜, y軸の傾斜)

といった感じで使えます。

これで完成です！

今回は、説明のためにクラスを分けましたが、実際に使用する時には一つにまとめたものを使ってください。

以上！

半円の作り方も紹介しています。ぜひ、こちらの記事も参考にしてください。