Có thể tạo bán kính đường viền bằng một nửa tổng chiều cao không có JavaScript không?

Question

Tôi đang tạo một trang web và các cuộc gọi mô phỏng cho các đầu trái và phải của một loại phần tử nhất định cho mỗi phần tử là nửa vòng tròn. Vì các phần tử sẽ có chiều cao khác nhau tùy thuộc vào số lượng văn bản trong chúng, tôi biết điều đó có nghĩa là tôi bằng cách nào đó cần làm cho bán kính biên giới của chúng bằng một nửa tổng chiều cao của phần tử. Điều này có thể thực hiện được nếu không sử dụng JS không?

Answer 1

Chắc chắn - chỉ cần đặt border-radius thành kích thước lớn!

#some-element { 
    border-radius: 9999px; 
} 

Nó sẽ xuất hiện ở kích thước tối đa cho phép góc tròn. Tuy nhiên, nếu phần tử của bạn cao hơn chiều rộng, hãy nhớ rằng bạn không thể có cả hai mặt là nửa vòng tròn mà không mở rộng phần tử.