CSSBattle

Daily Targets (260404)

코드
<p r><p><i>
<style>
  &>* {
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
    background: #1B1D36
  }
  
  p {
    /* 상단 타원 테두리 */
    width: 200;
    height: 80;
    margin: 20 auto;
    border: 40px solid #F0CD48;
    border-radius: 99q
  }

  i {
    display: block;
    /* 상단 타원 테두리 일부 가림 */
    width: 120;
    height: 40;
    margin: -40 auto;
    background: #1B1D36
  }

  [r] {
    /* 하단 줄무늬 패턴 사각형 */
    width: 160;
    height: 160;
    margin-top: -60;
    background: linear-gradient(90deg, #F0CD48 40px, #1B1D36 0) 0 / 60px 100% repeat-x;
    border: 0;
    border-radius: 0
  }
</style>