CodePenネタです。
CSSだけでGoogleのロゴを描く方法。
CSSはSCSSを使っています。

サンプル

See the Pen google logo in scss by ashish (@ashish1729) on CodePen.

HTML

.google
  .G
  .o
  .o2
  .g
  .l
  .e

CSS(SCSS)

body {
  background-color: honeydew;
}

//colors
$o1:#e63125;
$o2:#fbb002;
$g: #3174f1;
$l: #249a41;
$w: 80px;

.google {
  position: relative;
  width: 993 * $w/100;
  height: 325* $w/100;
  margin: 100px auto;
}

.G {
  position: absolute;
  width: 116 * ($w/100);
  height: 34* ($w/100);
  background-color: #3174f1;
  left: 126* ($w/100);
  top: 110* ($w/100);
}

.G:before {
  content: "";
  position: absolute;
  width: 236* ($w/100);
  height: 252* ($w/100);
  border-radius: 50%;
  border: 37* ($w/100) solid #3174f1;
  border-top-width: 33* ($w/100);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-width: 37* ($w/100);
  left: -122* ($w/100);
  top: -104* ($w/100);
  box-sizing: border-box;
  transform: rotate(-57deg);
}

.G:after {
  content: "";
  position: absolute;
  width: 254* ($w/100);
  height: 245* ($w/100);
  border-radius: 50%;
  border: 39* ($w/100) solid #3174f1;
  border-top-width: 33* ($w/100);
  border-top-color: #3174f1;
  border-right-color: transparent;
  border-bottom-width: 30* ($w/100);
  border-bottom-color: transparent;
  left: -130* ($w/100);
  top: -112* ($w/100);
  box-sizing: border-box;
  transform: rotate(0deg);
}

.o {
  position: absolute;
  width: 1.64 * $w;
  height: 1.64 * $w;
  border-radius: 50%;
  border: .36 * $w solid $o1;
  border-top-width: .33 * $w;
  border-bottom-width: .33 * $w;
  left: 2.54* $w;
  top: .86 * $w;
  box-sizing: border-box;
}

.o2 {
  position: absolute;
  width: 1.64 * $w;
  height: 1.64 * $w;
  border-radius: 50%;
  border: .36 * $w solid $o2;
  border-top-width: .33 * $w;
  border-bottom-width: .33 * $w;
  left: 4.32 * $w;
  top: .86 * $w;
  box-sizing: border-box;
}

.l {
  position: absolute;
  width: .36 * $w;
  height: 2.39 * $w;
  left: 7.88 * $w;
  top: .06 * $w;
  background: $l;
}

.g {
  position: absolute;
  width: 1.48 * $w;
  height: 1.64 * $w;
  border-radius: 50%;
  border: .36 * $w solid #3174f1;
  border-top-width: $w * .33;
  border-bottom-width: .33 * $w;
  border-right-width: .24 * $w;
  left: 6.1 * $w;
  top: .86 * $w;
  box-sizing: border-box;
  &:after {
    content: "";
    position: absolute;
    width: 1.59 * $w;
    height: 2.31 * $w;
    border: .33*$w solid $g;
    box-sizing: border-box;
    border-left-color: transparent;
    border-top: none;
    border-radius: 0 0 .8*$w .9*$w;
    left: -.4 * $w;
    top: -.27 *$w;
  }
  &:before {
    content: "";
    position: absolute;
    width: 154 *($w/100);
    height: 105 *($w/100);
    /* outline: 1px solid red; */
    border: 33 *($w/100) solid $g;
    box-sizing: border-box;
    border-left-color: transparent;
    border-top: none;
    border-right-color: transparent;
    border-radius: 0 0 73 *($w/100) 86 *($w/100);
    left: -48 *($w/100);
    top: 96 *($w/100);
    transform: rotate(22deg);
  }
}

.e:before {
  content: "";
  position: absolute;
  width: 236.5*$w/150;
  height: 164*$w/100;
  border-radius: 50%;
  border: 36*$w/100 solid #e63125;
  border-top-width: 33*$w/100;
  border-bottom-width: 33*$w/100;
  border-right-color: transparent;
  left: -1 * $w/150;
  top: 0;
  box-sizing: border-box;
  transform: rotate(-13deg);
}

.e:after {
  content: "";
  z-index: 1;
  position: absolute;
  width: 159*$w/100;
  height: 164*$w/100;
  border-radius: 50%;
  border: 36*$w/100 solid transparent;
  border-top-width: 34*$w/100;
  border-left-width: 28*$w/100;
  border-right-color: transparent;
  border-top-color: #e63125;
  left: -5*$w/100;
  top: 0;
  box-sizing: border-box;
  transform: rotate(30deg);
}

.e {
  position: absolute;
  width: 155*$w/100;
  height: 164*$w/100;
  border-radius: 50%;
  left: 840*$w/100;
  top: 86*$w/100;
  box-sizing: border-box;
  background-color: transparent;
  background: linear-gradient(-22deg, transparent 46%, $o1 47%, $o1 60%, transparent 61%);
  overflow: hidden;
}

参考

コメントを投稿する

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