CSSBattle

Daily Targets (260308)

코드
<p><p s><p r><p r b><p r c>
<style>
  &>* {
    background:#7D5E8B
  }

  * {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0
  }
  
  p {
    /* 두 원을 겹쳐 노란색 ')(' 모양 표현 */
    width: 240;
    height: 240;
    margin-left: -60;
    border-radius: 50%;
    background:#FFEAAB
  }
  
  [s] {
    margin-left: 60
  }
  
  [r] {
    /* 주황색 사각형 */
    width: 120;
    height: 120;
    margin: 60 0 0 -120;
    background: #E38F66;
    border-radius: 0
  }

  [b] {
    margin-left: 120
  }

  [c] {
    /* 보라색 - 주황색 - 보라색 사각형 */
    width: 360;
    background: linear-gradient(90deg, #7D5E8B 120px, #E38F66 0) 0 0 / 240px 120px;
    margin: -60 0 0
  }
</style>