CSSBattle May 7, 2025

문제

풀이

border로 삼각형 만드는걸 익힌게 여러모로 많이 사용되네요.
큰 삼각형 두개가 x축으로 뒤집힌 모양으로 겹치게 하면 되겠다 생각했어요.

요소를 겹치게 할 때 저는 absolute를 사용해요.
absolute를 사용할 때 중앙 정렬은 left: 50%, top: 50%, transform: translate(-50%, -50%)를 사용하고 있어요.

HTML

<div class="container">
  <div class="triangle back"></div>
  <div class="triangle front"></div>
</div>

CSS

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

.container {
  position: relative;
  
  width: 100vw;
  height: 100vh;
  
  background: #2D3464;
}

.triangle {
  position: absolute;
  left: 50%;
  top: 50%;
  
  width: 0;
  height: 0;
  
  border-style: solid;
  border-width: 300px 200px 0 200px;
  
  transform: translate(-50%, -50%);
}

.back {
  border-color: #5AA4B7 transparent transparent transparent;
  
  transform: translate(-50%, -50%) scaleY(-1);
}

.front {
  border-color: #C0D6E7 transparent transparent transparent;
}