타겟 이미지
flex 를 적용하고 flex-wrap: wrap 속성을 이용해서 width를 초과하는 element는 다음 행으로 내리자!
그리고 자식 태그는 3개만 만들기
내 코드
<div class="outer">
<div class="inner green"></div>
<div class="inner yellow"></div>
<div class="inner white"></div>
</div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #E3516E;
}
.outer {
display: flex;
width: 200px;
height: 200px;
border-radius: 50%;
background: #E3516E;
flex-wrap: wrap;
}
.inner {
width: 100px;
height: 100px;
}
.green {
background: #51B5A9;
border-radius: 100% 0 0 0;
}
.yellow {
background: #FADE8B;
border-radius: 0 100% 0 0;
}
.white {
background: #F7F3D7;
border-radius: 0 0 0 100%;
}
</style>
아웃풋
결과
Score: 600.69 {668 bytes}, 100% match
정리
flexbox가 정말 유용하다!