Hình chữ nhật CSS có một cạnh hình bầu dục

Điều này có thể thực hiện với CSS không? (Màu sắc là không quan trọng, chỉ cần phía dưới bên đó là hình bầu dục)Hình chữ nhật CSS có một cạnh hình bầu dục

enter image description here

Nguồn

2012-10-25 Ljubisa Livac

Chỉ đường cong dưới cùng hoặc đường cong + đường cong? –

Không, không, chỉ đường cong dưới cùng :-) –

Hãy thử

background-color: #60a0d0; 
border-bottom-left-radius:50% 10%; 
border-bottom-right-radius:50% 10%;

(với tiền tố trình duyệt thích hợp)

Nguồn

2012-10-25 08:30:21 podiluska

Đường cong không hoàn hảo như hình ảnh tôi đã đăng (bạn có thể so sánh ở đây http://imageshack.us/a/img72/4650/navchj.png), nhưng mọi thứ có còn hơn không! Cảm ơn nhiều! –

Tôi đã thử nghiệm một chút, tốt hơn với bán kính góc dưới bên trái: 50% 20%; border-bottom-right-radius: 50% 20%; Đó là nó, cảm ơn một lần nữa –

Bạn có thể nhận được bất kỳ đường cong với một hình elip hoặc hình tròn , được đặt phía sau khối chính: http://jsfiddle.net/e9RLQ/1/

.box { 
    position: relative;  
    background: #60a0d0; 
} 
.box:after { 
    position: absolute; 
    z-index: -1; 
    left: 0; 
    top: 100%; 
    width: 300%; 
    height: 300px; 
    margin: -292px 0 0 -100%; 
    background: #60a0d0; 
    border-radius: 50%; 
    content: ""; 
}

Hạn chế ở đây là độ phức tạp của việc thêm nền gradient.

Nguồn

2012-10-25 09:15:36 gkond

Hình chữ nhật CSS có một cạnh hình bầu dục

Trả lời

Các vấn đề liên quan