[CSS] しずくの形(雨粒の形)

しずく 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. 正方形を作る
  2. 角を1箇所残して丸める
  3. 回転させる
  4. 傾斜をつける

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

1.正方形を作る

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

<div class="square"></div>
.square {
  position: relative;
  width: 50px;
  height: 50px;
  background: blue;
}

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

角を丸めるには、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軸の傾斜)

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

これで完成です!


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

以上!

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

コメント

タイトルとURLをコピーしました