Tạo phần chân div cong bằng CSS

Ngày cập nhật: 19/11/2020 | Số lần đọc: 20650 | Số từ: 368 | Phân loại: CSS
Tìm kiếm

Tôi đã từng thấy hai cách để tạo hiệu ứng này, nhưng chỉ có phương pháp đầu tiên mang lại kết quả mượt mà và tự nhiên hơn. Dưới đây là ví dụ minh họa dựa trên đoạn mã template của WeChat Mini Program:

1
2

<view class="person_info">
</view>

Ý tưởng thực hiện ở đây là sử dụng pseudo-element after để tạo ra một hình tròn lớn phía dưới, sau đó chỉ để lộ một phần nhỏ ở giữa. Bạn cần lưu ý rằng chiều cao (height) của phần tử phải lớn hơn so với phần tử cha, và giá trị left nên được điều chỉnh cân đối theo tỷ lệ.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

.person_info {
 width: 100%;
 height: 400rpx;
 background-image: linear-gradient(180deg, #66ccff 0%, #41b5f0 100%);
 position: relative;
}
.person_info:after {
  background-color: #41b5f0;
  content: '';
  width: 160%;
  height: 450rpx;
  position: absolute;
  left: -30%;
  top: 0;
  z-index: -1;
  border-radius: 0 0 50% 50%;
}

Kết quả: !](CSS tạo phần chân div cong)
Nhược điểm:
Trên nền tảng iOS, đôi khi sẽ xuất hiện lỗi độ rộng khiến người dùng có thể cuộn trái/phải, trong khi Android không gặp vấn đề này. Vì vậy, tôi không khuyến khích sử dụng cách này nếu bạn đang phát triển ứng dụng đa nền tảng.

Cách thứ hai: Sử dụng thuộc tính border-bottom-left-radius

Bạn có thể tham khảo thêm tại:

1
2
3
4
5
6

/* Khi chỉ có một tham số, nó sẽ tạo thành hình tròn */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;
/* Khi có hai tham số, nó sẽ tạo thành hình elip */
/* border-bottom-left-radius: bán kính ngang bán kính dọc */
border-bottom-left-radius: 0.5em 1em;

Mã nguồn:

1
2
3
4
5
6
7

.person_info {
 width: 100%;
 height: 400rpx;
 background-image: linear-gradient(180deg, #66ccff 0%, #41b5f0 100%);
 border-bottom-left-radius: 60% 15%;
 border-bottom-right-radius: 60% 15%;
}

Tuy nhiên, hiệu quả thực tế không như mong muốn. Như bạn có thể thấy ở ảnh dưới đây: ![

Các mép bên trông chưa đủ mềm mại, và phần giữa gần như không có độ cong rõ rệt. Vì vậy, tôi vẫn khuyên bạn nên ưu tiên phương pháp đầu tiên.

Bí kíp sử dụng after kỳ diệu

Bạn có thể tìm hiểu thêm về after tại:
Trong tài liệu chính thức của after, không hề có bất kỳ hướng dẫn nào nói đến việc sử dụng nó theo cách sáng tạo này. Tôi cho rằng đây là một mẹo rất thông minh và đầy tính sáng tạo.
Bạn cũng có thể xem thêm câu hỏi tương tự tại: