CSSBattle

Daily Targets (260521)

코드
<p>
<style>
  & {
    background: #32360E
  }

  p {
    height: 240;
    margin: 30 72;
    /* conic-gradient를 통해 우측 하단 붉은색 계단 모양 표현 */
    background: conic-gradient(#A84A4B 75%, #0000 0) 100% 100% / 50% 50% no-repeat, #e8ad6d;
    /* 요소를 계단 모양으로 잘라내기 */
    clip-path: polygon(75% 0, 100% 0, 100% 100%, 0 100%, 0 75%, 25% 75%, 25% 50%, 50% 50%, 50% 25%, 75% 25%)
  }
</style>