LEE.SOL

CSSBattle

Daily Targets (260110)

코드
<p w>
  <i r>
    <b></b>
    <b s></b>
  </i>
  <i c>
    <b></b>
    <b s></b>
    <b t></b>
    <b f></b>
  </i>
</p>
<style>
  * {
    margin: 0
  }
  &>*{
    display: grid;
    place-items: center;
    background: #F4DA64
  }
  [w] {
    position: relative;
    width: 60;
    height: 60;
    background: #E25C57
  }
  i {
    position: absolute;
    inset: 0
  }
  [r] {
    transform: rotate(45deg);

    b {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20;
      height: 240;
      /* 빨간색 - 투명색 - 빨간색 줄무늬 패턴 */
      background: linear-gradient(transparent 120px, #E25C57 0) 0 240px / 100% 180px;
      transform: translate(-50%, -50%)
    }
    [s] {
      transform: translate(-50%, -50%) rotate(90deg)
    }
  }
  [c] {
    b {
      position: absolute;
      top: -75;
      left: 15;
      width: 30;
      height: 30;
      background: #E25C57;
      border-radius: 50%
    }
    [s] {
      top: 105
    }
    [t],[f] {
      top: 15;
      left: -75
    }
    [f] {
      left: 105
    }
  }
</style>