CSSBattle

Daily Targets (260127)

코드
<p o><p i><p l>
<style>
  body{
    display: flex;
    gap: 10px;
    background:#4A9A86;
    padding: 40 50
  }

  *{
    margin: 0
  }

  [o],[l] {
    /* 타원 모양 표현 */
    width: 100;
    height: 120;
    /* 타원 내 직사각형 표현 */
    background: linear-gradient(#4A9A86) 50% / 20px 60px no-repeat, #F7CB71;
    border-radius: 50%
  }
  [i] {
    /* 평행사변형 모양 표현 */
    width: 64;
    height: 220;
    margin-left: 8;
    background: #F7CB71;
    transform: skewX(-20deg)
  }
  [l]{
    /* 마지막 타원 요소 위치 조절 */
    position: relative;
    top: 100;
    left: 8
  }
</style>