타겟 이미지
개별 요소를 골라 스타일 하기 vs grid 방식으로 6개 만들고 color on/off 하기? 방법이 떠올랐다.
내 코드
<div class="container">
<div class="all a"></div>
<div class="all b"></div>
<div class="all c"></div>
</div>
<style>
body {
margin: 0;
font-size: 0;
background: #62306D;
}
.container {
width: 300;
height: 200;
margin: 50;
}
.all {
display: inline-block;
width: 100px;
height: 100px;
background: #F7EC7D;
}
.a {
margin: 0 100;
border-radius: 50% 50% 0 0;
}
.b {
border-radius: 0 0 50% 50%;
}
.c {
margin-left: 100;
border-radius: 0 0 50% 50%;
}
</style>
border-radius는 4가지를 사용할 경우 왼쪽 위 모서리부터 시계방향으로 적용됨
아웃풋
결과
Score: 602.26 {543}, 100% match
정리
다음에는 grid를 써서 6개의 아이템을 만들고 그 안에서 세분화해봐야겠다