DEV Community

Sekti Wicaksono
Sekti Wicaksono

Posted on

CSS Battle - #5 Acid Rains

HTML

<div></div>
Enter fullscreen mode Exit fullscreen mode

CSS

  body {
    background: #0B2429;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border-top-right-radius: 0;
    background: #998235;

    position: relative;
  }

  div::after, div::before {
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    background: #F3AC3C;
  }

  div::after {
    top: 60px;
    right: 60px;
    border-radius: inherit;
  }

  div::before {
    top: -60px;
    right: -60px;
    border-radius: 50%;
    z-index: -1;
  }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)