CSSBattle

Daily Targets (260210)

코드
<p>
  <i></i>
  <i s></i>
  <i t></i>
  <i f></i>
</p>
<style>
  &>*{
    display: grid;
    place-items:center;
    background:#F6E49C
  }
  p{
    position: relative;
    width: 220;
    height: 80;
    background: #2F5C24
  }
  i {
    position: absolute;
    top: 0;
    left: 0;
    /* 잎 모양 표현 */
    width: 80;
    height: 80;
    background: inherit;
    border-radius: 0 100px;
    transform: translate(-100%, -100%)
  }
  [s] {
    /* 상하 뒤집기 */
    scale: 1 -1
  }
  [t],[f] {
    left: auto;
    right: 0;
    /* 좌우 뒤집기 */
    scale: -1 1
  }
  [f] {
    /* 좌우 상하 뒤집기 */
    scale: -1
  }
</style>