📍타겟 이미지
- 마블의 그 테서랙트인듯..
📍문제 풀이
레이어를 어떻게 쌓으면 좋을까?
(맨 위)
- 원
- 민트 45도 회전 사각형
- 블랙 45도 회전 사각형
- 민트 바
(맨 아래)
flex로 간단히 해결 가능
클래스를 활용해서 중복된 스타일을 하나로 묶어준다
(테일윈드 처럼)
📍코드
<main class="flex dark full-width">
<div class="bar flex mint full-width">
<div class="lg flex dark">
<div class="sm flex mint">
<div class="dot"></div>
</div>
</div>
</div>
</main>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
height: 100%;
}
.bar {
height: 150px;
}
.lg {
width: 250px;
height: 250px;
transform: rotate(45deg);
}
.sm {
width: 150px;
height: 150px;
}
.dot {
width: 50px;
height: 50px;
background: #393E46;
border-radius: 50%;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.dark {
background: #222730;
}
.mint {
background: #4CAAB3;
}
.full-width {
width: 100%;
}
</style>
📍결과
100% match