CSSBattle May 5, 2025

문제

풀이

이번 문제는 clip-path를 사용해봤어요.

위의 모양에서 보여주지 않을 부분을 자르기 위해, polygon()을 사용해서 육각형의 모양으로 보여줄 부분 좌표만 설정해줬어요.

좌표대로 설정하면 위와 같은 모양의 육각형이 돼요.
해당 육각형을 첫 이미지의 도형에 적용하면 아래의 모양으로 만들어져요.

다음 요소는 위의 모양을 반전시키고 margin으로 위치를 지정하면 문제의 도형과 같아져요.

HTML

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

CSS

* {
  box-sizing: border-box;

  margin: 0;
}

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

  overflow: hidden;
}

p {
  margin: 80px 130px;
  
  width: 240px;
  height: 80px;

  border: 20px solid #D95F5B;
  border-radius: 50px;

  clip-path: polygon(0 0, 200px 0, 200px 50%, 100px 50%, 100px 100%, 0 100%);
}

p+p {
  margin: -100px 30px;
  
  transform: scale(-1);
}