CSSBattle

Daily Targets (260325)

코드
<!-- p: 노란 타원, b 속성: 반원 아치 컨테이너 -->
<!-- i: 아치 안쪽 기둥(배경색으로 구멍 효과) -->
<p>
<p b>
  <i></i>
  <i></i>
<style>
  &>* {
    background: #7A60A1
  }
  
  /* 노란 타원형 상단 요소 */
  p {
    width: 90;
    height: 70;
    margin: 40 auto 0;
    background: #F5DB78;
    border-radius: 99q
  }

  /* 반원 아치 컨테이너, flex로 좌우 기둥 배치 */
  [b] {
    display: flex;
    justify-content: space-between;
    width: 280;
    height: 140;
    margin-top: 10;
    border-radius: 999q 999q 0 0
  }

  /* 아치 안쪽 기둥, 배경색과 동일하여 구멍 효과 */
  i {
    width: 20;
    height: 50;
    margin: 90 40;
    background: #7A60A1
  }
</style>