CSSBattle Apr 22, 2025

문제

풀이

이전 삼각형 모양 만드는 문제를 풀었던게 도움이 많이 되었어요.
border로 보라색 모양을 만들고 flex로 배치하였습니다.

HTML

<div class="container">
  <div class="wrapper">
    <div class="triangle"></div>
    <div class="trapezoid"></div>
    <div class="trapezoid flipped"></div>
    <div class="triangle flipped"></div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 100vw;
  height: 100vh;

  background: #5A9F48;
}

.wrapper {
  display: flex;
  justify-content: center;
  gap: 30px;
  
  width: 260px;
  height: 100px;
}

.triangle {
  width: 0;
  height: 0;
  
  border-style: solid;
  border-width: 34.5px 0 0 45px;
  border-color: #2A2753 transparent transparent transparent;
}

.trapezoid {
  width: 0;
  height: 88px;

  border-style: solid;
  border-width: 0 40px 30px 0;
  border-color: transparent #2A2753 transparent transparent;
}

.flipped {
  transform: scaleX(-1);
}