CSSBattle

Daily Targets (260303)

코드
<p><p>
<style>
  &>* {
    display: flex;
    margin: 0;
    /* 상단 노란색 라인 */
    border-top: 20px solid #F4DA64;
    background: #3C8B98;
  }
  
  p {
    width: 90;
    height: 200;
    margin: 20 0 0;
    /* 상단·우측만 테두리 → ㄱ자 형태의 곡선 만들기 */
    border: solid #F4DA64;
    border-width: 40 40 0 0;
    /* 우측 상단만 둥글게 → 반원형 곡선 */
    border-radius: 0 130px 0 0;

    & + & {
      margin-left: auto;
      /* 좌우 반전으로 대칭 */
      transform: scaleX(-1);
    }
  }
</style>