どうも7noteです。さくらの花と花びらをCSSで再現

（cssで作った花と花びらの見本）

再現シリーズ、季節に合わせていろいろ作っていきたいと思います。
季節に合わせたサイトとかって個人的にめっちゃ好きです。きれいなデザインやわかりやすい構成のWEBも素晴らしいと思いますが、どこかに造り手の遊び心が入っているサイトって素敵だなって思います。

そんなサイト作りができるクリエイターになりたいものですね。

ではでは日本の春といえば桜🌸かなと思ったのでさくらをCSSで再現していきます。

さくらの花の作り方

index.html

<div class="sakura">
  <div class="petal01"></div>
  <div class="petal02"></div>
  <div class="petal03"></div>
  <div class="petal04"></div>
  <div class="petal05"></div>
</div>

style.css

.sakura {
  position: relative;
}
	
.sakura div {
  width: 50px;
  height: 80px;
  background: #FBA5D1;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center bottom 20px; /* 回転の基準を下の方に指定 */
}
.sakura .petal02 { transform: rotate(72deg);} /* 5枚なら72度ずつ */
.sakura .petal03 { transform: rotate(144deg);}
.sakura .petal04 { transform: rotate(216deg);}
.sakura .petal05 { transform: rotate(288deg);}

/* 三角形の花びらの先 */
.sakura div::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: #fff transparent transparent transparent; /* 背景色と同じ色を指定 */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

さくらの花びらの作り方

index.html

<div class="petal"></div>

style.css

.petal {
  width: 50px;
  height: 50px;
  background: #FBA5D1;
  border-radius: 100% 0 100% 0;
  position: relative;
}
	
.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FBA5D1;
  border-radius: 100% 0 100% 0;
  transform: rotate(-15deg);
}

まとめ

この作り方でjsと組み合わせて桜吹雪を再現する方法もあるようです。

参考:https://web-dev.tech/front-end/javascript/cherry-blossom-petal-falling-effect/

他にもさくらの色としてで使えそうな色見本をいくつか用意していますので、お好みで好きな色で作ってみてください。

.A {background: #fdeeef;}
.B {background: #eddbd8;}
.C {background: #f4b3c2;}
.D {background: #EC90B8;}
.E {background: #FBA5D1;}

おそまつ！

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