CSSBattle

Daily Targets (260503)

코드
<p>
  <c></c>
  <c></c>
</p>
<p b>
  <c></c>
  <c></c>
</p>
<p r>
  <c></c>
  <c></c>
</p>
<p l>
  <c></c>
  <c></c>
</p>
<style>
  &>* {
    padding: 2 0;
    background: #F8D2D1
  }
  
  p {
    /* 직사각형 */
    width: 40;
    height: 100;
    margin: 0 auto;
    padding: 10;
    background: #529CAF
  }

  [b] {
    margin-top: 40;
    scale: -1
  }

  [r] {
    position: fixed;
    rotate: 90deg;
    margin: -200 0 0 292
  }

  [l] {
    position: fixed;
    rotate: -90deg;
    margin: -200 0 0 32
  }
  
  c {
    /* 사각형 내 원 */
    display: block;
    width: 30;
    height: 30;
    margin: 0 auto 10;
    border-radius: 50%;
    background: #F8D2D1
  }
</style>