CSS를 사용하여 div의 아래쪽을 안쪽으로 말립니다.

Question

CSS를 사용하여 이 직사각형 div/배경의 아래쪽 가장자리를 구부리고 싶으므로 결과는 다음과 같습니다.

구현 방법을 아는 사람이 있나요?

.curved {
  여백: 0 자동;
  높이: 400px;
  배경: 연한 파란색;
  테두리 반경:0 0 200px 200px;
}

Answer 1

확인해보세요. :after 의사 요소를 사용하여 이것을 만들었습니다. 배경이 단색이면 도움이 됩니다.

으아악 으아악

Answer 2

그냥 border-radius을 사용하고 약간의 오버플로에 의존하세요. 추가 마크업을 피하기 위해 의사 요소를 고려할 수도 있습니다.

으아아아 으아아아