[CSSBattle] Target #5 - Acid Rain

CSSBattle

CSS Battle 사이트는?

Target #5 - Acid Rain

문제 풀러가기

일단 빗방울 같이 생긴 도형 2개는 box-shadow를 이용해서, 같이 처리하면 될 것 같았다. 문제는 오른쪽 원이었고, border-radius가 달랐기에 새로 하나 만들고, 픽셀로 계산해서 조절해서 넣자 생각을 했다.

<div></div>
<div></div>

<style>  
  body {
    background: #0B2429;
  	margin: 0;
  }
  div {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #F3AC3C;
  }
  div:nth-child(1) {
    left: 200px;
    top: 30px;
    border-radius: 50%;
  }
  div:nth-child(2) {
    left: 80px;
    top: 150px;
    border-radius: 50% 0 50% 50%;
    box-shadow: 60px -60px 0 0 #998235;
  }
</style>

끝