CodePenネタです。
CSSだけでChromeのロゴを描く方法。

サンプル

See the Pen CSS Chrome logo -sassy by ashish (@ashish1729) on CodePen.

HTML

<div class='container'>
  <div class='shape'></div>
  <div class='shape shape2'></div>
  <div class='shape shape3'></div>
</div>

CSS(SCSS)

// diameter of the logo
$dia: 400px;
// change this dia value and everything should remain intact :)

$ashi_red: #db4437;
$ashi_blue: #4285f4;
$ashi_yellow: #f4b400;
$ashi_green: #0f9d58;
$ashi_white: white;
$body_color: rgb(230, 246, 255);

body {
  background-color: $body_color;
}

.container {
  width: $dia;
  height: $dia;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
}

$smallDiaFactor:0.3869565217391304;
$smallBorderFactorOriginal:0.05434782608695652;
$smallBorderFactor:0.05434782608695652;

.container: after {
  position: absolute;
  content: "";
  display: block;
  width: $smallDiaFactor*$dia;
  height: $smallDiaFactor*$dia;
  background: $ashi_blue;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: $smallBorderFactor*$dia solid $ashi_white;
}

.shape {
  background: $ashi_yellow;
  width: 0.7*$dia;
  height: 0.85*($smallDiaFactor+$smallBorderFactor)*$dia;
  position: absolute;
  top: (0.5- $smallDiaFactor/2 - $smallBorderFactor)*$dia;
  left: 50%;
  transform-origin: left ($smallBorderFactor+$smallDiaFactor/2)*$dia;
  //prevent user selection
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

.shape:after {
  position: absolute;
  content: "";  
  background-color: inherit;
  width: 0.3*$dia;
  height: 0.8*$dia;
  transform-origin: inherit;
  transform: rotate(30deg) translateX((($smallBorderFactor+$smallDiaFactor/2)*$dia)*0.989) ;
}

.shape2 {
  transform: rotate(120deg);
  background-color: $ashi_green;
}

.shape3 {
  transform: rotate(240deg);
  background-color: $ashi_red;
}

参考

CSS Chrome logo -sassy

コメントを投稿する

* が付いている項目は必須です。
メールアドレスが公開されることはありません。