CodePenネタです。
CSSだけでVisual Studio Codeのロゴを描く方法です。
HTMLはPug、CSSはSCSSを使っています。

サンプル

See the Pen Pure css – Visual Studio Code Icon by Nicola Regattieri (@regattieri) on CodePen.

HTML(Pug)

.body
  .box
    .container--big
      .square-right
      .square-bottom
    .book
      .container
        .square-front-light-top
        .square-front-light-top-2
        .square-back-dark

CSS(SCSS)

$dark-pastel-purple: #907AD6;
$blue-jeans: #5BABF1;
$raisin-black: #2A2C2A;
$cyan-cornflower-blue: #247DB8;
$blue-light-jeans: #5FACF3;
$celestial-blue: #3E96D2;
$cyan-cornflower-blue-light: #247DB8;

body{
  background: $dark-pastel-purple;
}

.box, .container--big, .square-right, .square-bottom, .container, .book, .square-front-light-top, .square-front-light-top-2, .square-back-dark  {
  position: absolute;
}

//main-container box
.box{
  width: 370px;
  height: 370px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

 //outer container 
.container--big {
  background: transparent;
  width: 75%;
  height: 76%;
  top: 12%;
  right: 0;
  left: 15%;
  transform: rotate(-10deg);
}

.square-right {
  height: 100%;
  width: 80%;
  background: $blue-jeans;
  right: 0;
  top: 0;
  clip-path: polygon(73% 100%, 100% 90%, 100% 10%, 73% 0);
}

.square-bottom {
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;  
  background: $cyan-cornflower-blue;
  z-index: -1;
  clip-path: polygon(79% 100%, 100% 90%, 10% 75%);
}

//logo container
.container {
  position: relative;
  width: 60%;
  height: 50%;
  margin-top: 21%;
  margin-left: 16%;
  background: transparent;
}

.book {
  width: 65%;
  height: 88%;
  background: $raisin-black;
  border-radius: 10px;
  top: 6%;
  left: 17.5%;
  transform: rotate(-10deg);
  z-index: -2;
}

.square-front-light-top {
  width: 100%;
  height: 100%; 
  background: $blue-light-jeans;
  clip-path: polygon(78% 0, 100% 8%, 9% 76%, 0 72%);
}

.square-front-light-top-2 {
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%; 
  background: $celestial-blue;
  clip-path: polygon(78% 100%, 100% 92%, 9% 24%, 0 28%);
}

.square-back-dark {
  top: 8%;
  right: 0;
  width: 22%;
  height: 84%;
  z-index: -2;
  background: $cyan-cornflower-blue-light;
}

@media all and (max-width: 600px) {
  .box{
  width: 300px;
  height: 280px;
  top: 18%;
  }

}

一言

Microsoft社のサイトに使えそう。

コメントを投稿する

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