How to Make a Nintendo Switch Game Console Drawn by Pure CSS3

How to Make a Nintendo Switch Game Console Drawn by Pure CSS3: BY Harold13 Nov,2020; Tags:
Nintendo Switch Nintendo

Introduction

CSS3 is really powerful. With it, our web pages are no longer as horizontal and vertical as before. This time we share a Nintendo Switch game console drawn by pure CSS3. The appearance of the game console is drawn through CSS3, especially the corners of the game console are drawn with a 3D visual effect through the shadow property of CSS3.

How to Make a Nintendo Switch Game Console Drawn by Pure CSS3

Instructions

HTML Body Code

<div class="box">
  <div class="switch-container"></div>
  <div class="joy-con-left">
    <div class="bumper-left"></div>
    <div class="minus-btn"></div>
    <div class="analog-left"></div>
    <div class="dpad-container-left">
      <div class="dpad-up"></div>
      <div class="dpad-right"></div>
      <div class="dpad-down"></div>
      <div class="dpad-left"></div>
    </div>
    <div class="square-btn"></div>
  </div>
  <div class="joy-con-right">
    <div class="bumper-right"></div>
    <div class="plus-btn"></div>
    <div class="dpad-container-right">
      <div class="dpad-x"></div>
      <div class="dpad-a"></div>
      <div class="dpad-b"></div>
      <div class="dpad-y"></div>
    </div>
    <div class="analog-right"></div>
    <div class="home-btn"></div>
  </div>
  <div class="screen-outer">
    <div class="screen-inner"></div>
    <div class="reflector"></div>
    <div class="lcd">
      <div class="logo-left">
        <div class="dot-left"></div>
      </div>
      <div class="logo-right">
        <div class="dot-right"></div>
      </div>
    </div>
  </div>
</div>

Css Code

.box {
  position: relative;
  margin: 5% auto;
  width: 902px;
  height: 384px;
}

.switch-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.joy-con-left {
  position: absolute;
  width: 15%;
  height: 100%;
  background: var(--joycon-left);
  border-top-left-radius: 90px;
  border-bottom-left-radius: 90px;
  box-shadow: inset 5px 5px 10px var(--joycon-left), inset 7px 15px 5px -5px rgba(255,255,255,.6), inset 10px -35px 8px -25px rgba(0,0,0,.4), inset 12px 0px 10px -5px rgba(0,0,0,.4);
}

.bumper-left {
  position: absolute;
  width: 100%;
  height: 50%;
  top: -3px;
  left: -3px;
  background: rgba(0,0,0,.7);
  border-top-left-radius: 90px;
  z-index: -1;
  -webkit-clip-path: polygon(0 0, 80% 0, 80% 40%, 0 30%);
  clip-path: polygon(0 0, 80% 0, 80% 40%, 0 30%);
}

VIEW NOW