CSSBattle

Daily Targets (260304)

코드
<b>
  <p></p>
  <p c></p>
  <p></p>
</b>
<b s>
  <i></i>
  <i t></i>
</b>
<style>
  &>*{
    margin-top: 24;
    background:#3C8B98
  }
  
  b {
    display: flex;
    justify-content: center;
    gap: 10px
  }
  
  p {
    /* 직사각형 표현 */
    width: 50;
    height: 80;
    background: #fff
  }

  [s] {
    margin-top: -6;
  }
  
  [c] {
    /* 가운데 직사각형만 초록색으로 변경 */
    background: #BFFFAE
  }

  i {
    width: 70;
    height: 80;
    /* 좌우 음수 margin으로 겹쳐서 연결된 모양 구현 */
    margin: 0 -30;
    /* 보더로 U자 형태 생성 */
    border: solid #BFFFAE;
    border-width: 0 50 50 50
  }
</style>