CSSだけでうちわを作る

どうも7noteです。毎日暑い日が続くからCSSでうちわを作って涼みたい。

毎日毎日汗を拭いながら働く日々。
そんな辛い日々を癒してくれるうちわがあればいいなと。

CSSで作ってしまいましょう。

ソース

index.html

<div class="uchiwa">
  <div class="mochite"></div>
</div>

style.css

.uchiwa {
  width: 200px;
  height: 200px;
  background: #D9E3EC;
  /* background: url(uchiwa.png) center center / contain; */ /* 画像うちわ用 */
  /* border: 1px solid #ccc; */
  border-radius: 50%;
  position: relative;
}

.mochite {
  content: '';
  width: 75%;
  height: 75%;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  bottom: -50%;
  left: 0;
  right: 0;
  margin: auto;
}

.mochite::before {
  content: "";
  width: 80%;
  height: 70%;
  display: inline-block;
  background-image: linear-gradient(90deg, #fff 25%, #DDB76D 25%, #DDB76D 50%, #fff 50%, #fff 75%,#DDB76D 75%, #DDB76D);
  background-size: 4px 4px;
  border-bottom: solid 2px #DDB76D;
  border-radius: 50%;
  transform: perspective(.6em) rotateX(-380deg);
  transform-origin: bottom;
  position: absolute;
  top: -40%;
  left: 0;
  right: 0;
  margin: auto;
}

.mochite::after {
  content: '';
  width: 9%;
  height: 50%;
  background: #DDB76D;
  display: inline-block;
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  margin: auto;
}

解説

丸に白い丸を重ねて紙の部分を作成。
そこに持ち手をつければ完成です。

紙の部分は好きな写真をはめ込んで推しうちわを作ったりもできますよ。

骨組みの部分はかなり無理矢理作ってるので解説は省きます。。。

まとめ

「結論」
CSSでうちわを作っても涼しくはならない。
けどCSSの練習にはなるかも。クーラー最高！

おそまつ！

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