cssで和風アイコンを作る

cssのみを使ってアイコン風のイラストを描いていきます。
梅、松はradial-gradientを使いグラデーションの応用だけで書きました。
みつうろこの三角形は clip-path: polygonを使って２つの三角形を重ねています。
コードはコピーするだけで使えます。

梅

梅アイコン風

htmlファイル

<div class="ume">
</div>

cssファイル

.ume:before {
  content: " ";
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: radial-gradient(#e7556a 25%, transparent 0),
    radial-gradient(#e7556a 25%, transparent 0),
    radial-gradient(#e7556a 25%, transparent 0),
    radial-gradient(#e7556a 25%, transparent 0),
    radial-gradient(#e7556a 25%, transparent 0);
  background-position: 50% 0, 5% 40%, 95% 40%, 23% 95%, 78% 95%;
  background-size: 55px 55px;
  background-repeat: no-repeat;
}

みつうろこ

みつうろこアイコン風

htmlファイル

<div class="mituuroko">
　<span></span>
</div>

cssファイル

.mituuroko:before {
  content: " ";
  display: inline-block;
  margin: 10px;
  margin-bottom: 20px;
  background: #dbdada;
  height: calc(tan(60deg) * 80px / 2);
  width: 80px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.mituuroko span:before {
  content: " ";
  display: inline-block;
  position: absolute;
  margin-top: 45px;
  margin-left: -70px;
  background: #ffffff;
  height: calc(tan(60deg) * 40px / 2);
  width: 40px;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

松

松アイコン風

htmlファイル

<div class="matu">
</div>

cssファイル

.matu:before {
  content: " ";
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: radial-gradient(
      farthest-side circle at center bottom,
      #ffffff 0%,
      #ffffff 60%,
      #8fd79b 60%,
      #8fd79b 100%
    ),
    radial-gradient(#8fd79b 50%, transparent 0),
    radial-gradient(#8fd79b 50%, transparent 0),
    radial-gradient(#8fd79b 50%, transparent 0);
  background-position: 50% 75%, 50% 0, 0 50%, 100% 50%;
  background-size: 40px 40px, 60px 60px, 60px 60px, 60px 60px;
  background-repeat: no-repeat;
}

芯綴渡企画

芯綴渡企画は「日常に、日本文化のエッセンスを」を合言葉に日本文化に基た生活を提案しています。
特にIT業界で疎かにされがちな日本語や日本的なデザインを探求しています。
HPや業務システムの制作、広告デザイン、写真撮影など幅広く依頼をお受けしていますので気軽にお問い合わせ下さい。

芯綴渡企画|日常に、日本文化のエッセンスを|和風|写真撮影|HP制作