<html>
<head>
<style>
:root {
--blue: #0047A0;
--red: #CD313A;
--black: #000000;
--white: #FFFFFF;
--trigrams-location-width: cos(atan2(2,3)) * (11/18);
--trigrams-location-height: sin(atan2(2,3)) * (11/12);
--brick-size: 1/6;
}
body {
background-color: var(--black);
}
.wrap {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: calc((2/3) * 100%);
}
.taegeukgi {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--white);
display: flex;
align-items: center;
justify-content: center;
}
.taegeuk {
position: absolute;
width: calc((1/3) * 100%);
height: 50%;
background: linear-gradient(var(--red) 50%, var(--blue) 0);
border-radius: 50%;
rotate: calc(atan2(2,3));
}
.taegeuk::before {
position: absolute;
content: "";
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--red);
margin: 25% 0;
}
.taegeuk::after {
position: absolute;
content: "";
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--blue);
margin: 25% 50%;
}
.trigrams {
position: absolute;
width: calc((var(--trigrams-location-width) + var(--brick-size)) * 100%);
height: calc((var(--trigrams-location-height) + var(--brick-size)) * 100%);
display: grid;
grid-template-rows: repeat(2, 1fr);
gap: calc(((var(--trigrams-location-width) - var(--brick-size)) / (var(--trigrams-location-width) + var(--brick-size))) * 100%);
}
.top,
.bottom {
display: flex;
justify-content: space-between;
}
.sky,
.water,
.fire,
.earth {
width: calc((var(--brick-size) / (var(--trigrams-location-width) + var(--brick-size))) * 100%);
display: grid;
column-gap: calc((1/12) * 100%);
row-gap: calc((1/8) * 100%);
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
}
.brick {
background-color: var(--black);
}
.sky {
grid-template-columns: 1fr;
}
.water {
grid-template-columns: repeat(2, 1fr);
}
.water .brick:nth-child(3) {
grid-column: span 2;
}
.fire {
grid-template-columns: repeat(2, 1fr);
}
.fire .brick:first-child,
.fire .brick:last-child {
grid-column: span 2;
}
.sky,
.earth {
transform: rotate(atan2(3, -2));
}
.water,
.fire {
transform: rotate(atan2(3, 2));
}
</style>
</head>
<body>
<div class="wrap">
<div class="taegeukgi">
<div class="taegeuk"></div>
<div class="trigrams">
<div class="top">
<div class="sky">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="water">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>
<div class="bottom">
<div class="fire">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="earth">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
아니 CSS는 참 못하는게 없군요;;;
4
0
2
497
추천
반대
신고
답글
상대방에 대한 배려는 네티켓의 기본입니다.게시물에 상관없는 답글이나 추천유도성 답글을 달지 마세요.
