CSSBattle May 4, 2025

문제

풀이

이번엔 class 대신 인접 형제 결합자를 사용해봤어요.
결합자에 익숙하지 않으니 결합자를 사용해봐도 도움이 될것 같아요.

또 요소를 뒤집을 때 rotate 대신 scale을 사용해봤어요.
animation을 사용하지 않는다면 scale(-1)과 rotate(180deg)의 결과물은 같아요.

HTML

<div class="container">
  <p></p>
  <p></p>
</div>

CSS

* {
  box-sizing: border-box;

  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  
  background: #FAE29E;

  overflow: hidden;
}

p {
  width: 250px;
  height: 90px;

  margin: 40px 75px;

  border: 10px solid #4A9A86;
  border-width: 0 40px 40px;
}

p + p {
  border-color: #4C4C6B;

  transform: scale(-1);
}