📍타겟 이미지
📍문제 풀이
- 포크의 날카로운 부분은 7개의 div로 구현하여 홀수 번째 부분은 윗부분에 border-radius를 주고
짝수 번째 부분은 아랫부분에 border-radius를 준다
- 그런데 간단할 줄 알았는데 까다로운 부분이 생긴다
container 부분의 컬러에 따라, 이렇게 모서리를 깎아내도 적용되지 않는 문제가 생긴다
- 이를 해결하기 위해 홀수번째 날카로운 부분에만 div를 하나 더 생성해줘야 한다 (배경 layer 추가하여 배경색을 바꿔줘야 함)
📍코드
<div class="container">
<div class="group">
<div>
<div class="top"></div>
</div>
<div></div>
<div>
<div class="top"></div>
</div>
<div></div>
<div>
<div class="top"></div>
</div>
<div></div>
<div>
<div class="top"></div>
</div>
</div>
<div class="bar"></div>
</div>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
background: #6592CF;
}
.container {
width: 140px;
height: 200px;
background: #060F55;
border-radius: 0 0 70px 70px;
}
.group {
display: flex;
width: 100%;
height: 55%;
}
.group > div {
width: 20px;
height: 100%;
}
.group > div:nth-child(odd) {
background: #6592CF;
}
.group > div:nth-child(even) {
background: #6592CF;
border-radius: 0 0 10px 10px
}
.top {
width: 100%;
height: 100%;
background: #060F55;
border-radius: 10px 10px 0 0;
}
.bar {
position: absolute;
bottom: 0;
left: 50%;
background: #060F55;
width: 20px;
height: 55px;
transform: translate(-50%);
}
</style>
📍결과
100% match