DEV Community

rybson
rybson

Posted on

3 3

CSS: Wallet

Wallet

<div class="wallet">
    <div class="rectangle">
      <div class="rectangle__front"></div>
      <div class="closure"></div>
    </div>

    <div class="card">
      <div></div>
      <div></div>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode
.wallet {
  --width: 400px;
  position: relative;
}

.rectangle {
  width: var(--width);
  height: calc(var(--width) * 0.72);
  position: relative;
  background-color: hsl(63, 74%, 35%);
  border-radius: calc(var(--width) * 0.06);
  z-index: 1;

  &__front {
    width: calc(var(--width) * 0.92);
    height: calc(var(--width) * 0.72);
    position: absolute;
    right: 0;
    background-color: hsl(62, 65%, 43%);
    border-radius: calc(var(--width) * 0.06);
    overflow: hidden;

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      clip-path: polygon(100% 0, 0 100%, 100% 100%);
      background-color: hsla(0, 0%, 0%, 0.035);
    }
  }
}

.closure {
  width: calc(var(--width) * 0.4);
  height: calc(var(--width) * 0.26);
  position: absolute;
  left: calc(var(--width) * -0.04);
  top: 50%;
  transform: translateY(-50%);
  background-color: lighten(hsl(62, 65%, 43%), 8%);
  border-radius: calc(var(--width) * 0.12) calc(var(--width) * 0.6)
    calc(var(--width) * 0.6) calc(var(--width) * 0.12);
  overflow: hidden;
  box-shadow: 8px 8px 22px -10px hsla(0, 0%, 0%, 0.2);

  &::after {
    content: "";
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    background-color: hsla(0, 0%, 0%, 0.035);
  }

  &::before {
    content: "";
    width: calc(var(--width) * 0.12);
    height: calc(var(--width) * 0.12);
    position: absolute;
    right: calc(var(--width) * 0.06);
    top: 50%;
    transform: translateY(-50%);
    background-color: hsl(0, 0%, 100%);
    border-radius: 100rem;
  }
}

.card {
  width: calc(var(--width) * 0.72);
  height: calc(var(--width) * 0.4);
  position: absolute;
  top: calc(var(--width) * -0.18);
  left: calc(var(--width) * 0.06);
  background-color: hsl(0, 0%, 45%);
  border-radius: calc(var(--width) * 0.04);
  transform: rotate(-12deg);
  overflow: hidden;

  &::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: hsla(0, 0%, 0%, 0.035);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  }

  div {
    height: calc(var(--width) * 0.12);
    width: calc(var(--width) * 0.12);
    position: absolute;
    right: calc(var(--width) * 0.04);
    border-radius: calc(var(--width) * 0.04);

    &:first-child {
      top: calc(var(--width) * 0.04);
      background-color: hsl(41, 97%, 55%);
    }

    &:last-child {
      top: calc(var(--width) * 0.2);
      background-color: hsl(0, 0%, 100%);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay