Trong khi thiết kế một trang web, việc thêm các hình bán nguyệt thay vì hình tròn sẽ mang lại một cái nhìn đẹp hơn. Hơn nữa, việc hình thành các bán nguyệt rất dễ dàng cũng như thú vị.
Trong bài viết này, chúng tôi sẽ cung cấp một hướng dẫn về cách tạo một hình bán nguyệt bằng CSS.
Làm thế nào để tạo một nửa vòng kết nối với CSS?
Để tạo một nửa vòng tròn, chúng tôi sẽ sử dụng nút “ bán kính biên giới ' tài sản. Thuộc tính này sẽ giúp chúng ta tạo hình bán nguyệt theo những cách sau:
- Bán nguyệt từ trên cùng
- Bán nguyệt từ dưới lên
- Hình bán nguyệt từ bên trái
- Hình bán nguyệt từ bên phải
Hãy trình bày chi tiết về từng cái một!
Ví dụ 1: Tạo một nửa vòng kết nối từ trên cùng bằng CSS
Để tạo một nửa vòng tròn từ trên cùng, trước tiên, chúng tôi sẽ chỉ định “ HTML Bây giờ, hãy đặt các kích thước phù hợp cho div, chẳng hạn như chúng ta sẽ gán “ bề rộng 'Giá trị thuộc tính là' 180px ' và ' Chiều cao 'Thuộc tính có giá trị' 90px ”. Trong bước tiếp theo, hãy đặt “ bán kính biên giới ' giá trị tài sản ' 12rem 12rem 0 0 ”; trong đó chữ số 12rem đầu tiên sẽ cắt bỏ phần trên cùng bên trái của div, 12rem thứ hai sẽ cắt phần trên cùng bên phải, chữ số thứ ba và thứ tư 0 sẽ cắt bỏ phần dưới cùng của div. Cuối cùng, để tạo màu cho hình tròn, hãy sử dụng “ màu nền Thuộc tính 'với giá trị' màu đỏ tía ”. CSS Lưu tệp HTML với mã được đề cập và mở nó trong trình duyệt của bạn: Như bạn có thể thấy, chúng tôi đã tạo thành công một hình bán nguyệt với thuộc tính bán kính đường viền CSS. Để hình thành một nửa hình tròn từ phía dưới, chúng tôi sẽ đặt các giá trị thuộc tính bán kính đường viền là “ 0 0 12rem 12rem ”, Trong đó hai giá trị đầu tiên đại diện cho bán kính đường viền trên cùng bên trái và trên cùng bên phải. Chúng tôi đã đặt chúng thành 0 để làm cho nửa trên của div biến mất hoàn toàn. Đối với phần dưới cùng, chúng tôi chỉ cắt bớt một chút phía dưới bên trái và phía dưới bên phải bằng cách đặt các giá trị thành 12rem. CSS Đầu ra Để tạo một nửa vòng tròn CSS ở bên phải, trước tiên, hãy điều chỉnh chiều cao và chiều rộng của vùng chứa vì điều đó là cần thiết để có được hình dạng thích hợp của hình tròn. Đặt “ bề rộng ' như ' 90px ' và ' Chiều cao ' như ' 180px ' thời gian này. Một lần nữa, hãy sử dụng thuộc tính bán kính đường viền với giá trị “ 0 12rem 12rem 0 ”, Trong đó giá trị đầu tiên 0 dành cho phía trên cùng bên trái, giá trị cuối cùng 0 dành cho phía dưới cùng bên trái và giá trị thứ hai và thứ ba được thêm vào để cắt bớt phần trên cùng bên phải và phía dưới bên phải. Áp dụng các giá trị này sẽ tạo thành một nửa vòng tròn từ bên phải. CSS Đầu ra Lần này, hãy chỉ định thuộc tính bán kính đường viền cùng với giá trị “ 12rem 0 0 12rem ”; giá trị đầu tiên và cuối cùng 12rem sẽ cắt phía trên bên trái và phía dưới bên trái của div, việc đặt giá trị thứ hai và thứ ba thành 0 sẽ làm rõ phần trên cùng bên phải và phía dưới bên phải của vòng tròn. Cuối cùng, hình bán nguyệt bên trái của chúng ta sẽ được tạo. CSS Đầu ra Chúng tôi đã cung cấp các phương pháp khác nhau để tạo hình bán nguyệt bằng CSS. Để tạo một nửa vòng tròn, chúng ta có thể chỉ cần sử dụng CSS “ bán kính biên giới ' tài sản. Hình bán nguyệt có thể được tạo từ bên này sang bên kia, chẳng hạn như sang trái, phải, trên và dưới. Trong thuộc tính bán kính đường viền, giá trị ban đầu dành cho phía trên bên trái, giá trị thứ hai cho phía trên bên phải, giá trị thứ ba cho phía dưới bên phải và giá trị thứ tư cho phía dưới bên trái. Bài viết này đã giải thích cách tạo một hình bán nguyệt bằng CSS.
bề rộng : 180px ;
Chiều cao : 90px ;
bán kính biên giới : 12rem 12rem 0 0 ;
màu nền : màu đỏ tía ;
}
Ví dụ 2: Tạo một Bán vòng tròn từ Dưới cùng bằng CSS
bề rộng : 180px ;
Chiều cao : 90px ;
bán kính biên giới : 0 0 12rem 12rem ;
màu nền : màu đỏ tía ;
}
Ví dụ 3: Tạo một hình bán nguyệt từ bên phải bằng CSS
bề rộng : 90px ;
Chiều cao : 180px ;
bán kính biên giới : 0 12rem 12rem 0 ;
màu nền : màu đỏ tía ;
}
Ví dụ 4: Tạo một hình bán nguyệt từ bên trái bằng CSS
bề rộng : 90px ;
Chiều cao : 180px ;
bán kính biên giới : 12rem 0 0 12rem ;
màu nền : màu đỏ tía ;
}
Sự kết luận