[Giúp đỡ] Làm thế nào để uốn cong top/bottom của div

Phần đấy hình như là dùng hình ảnh chèn vô

bạn chọn vùng cần bẻ cong ---> ctrl + T ( Edit ---> Free trasform ) , chuột phải vào vùng chọn, chọn Warp ----> kéo chuột từ điểm giữa kéo xuống . Chúc bạn thành công

Dạ e lạy thánh danghong

danghong có phải trong pts đâu
Nhưng mình cũng nghĩ là dùng hình chèn vào như #2
Hoặc là 1 background cực to dùng border-radius sau đó move nó lên trên nhưng ko khả thi.

Mình có sử dụng border-radius nhưng nó chỉ làm bo tròn ở 4 góc chứ ko bẻ hẳn 1 đường cong như vậy.

Nếu chèn ảnh vào thì cũng ko đc đâu, vì vùng Animation đó là nơi để chèn slideshow và menu vào. Mục đích ở đây là phải làm sao để div trên nó cong ở bottom và div dưới cũng cong (lõm vào) ở top.

HTML:

 border-radius: 0 0 999px 999px;

chỉnh 2 số cuối 1 hồi sao cho hợp là tùy ở bạn

banbaonylong: Cám ơn bạn, chỉ có thể bo đc 2 bên góc hoặc tròn hết cả hình thôi, không bẻ đc kiểu như trên.

bạn chỉnh cái số đó nữa chứ mình ko bảo bạn copy y nguyên

Phải cắt thui bạn ơi ... css nhìn ko đẹp lắm !!! Tùy theo giao dien trang con mà cắt header sao cho đúng ... theo mình thì

Liệu có thể dùng đơn vị là em thay vì px để khi phóng to nó giãn theo tỉ lệ

Bạn có thể dùng cách này jsfiddle.net/FTyAT/2/

Code:

div.curled-corner {
    border-radius: 0 0 50% 50% / 0 0 20% 20%;
}

Dùng border-radius với dấu /. Phía trước dấu / là giá trị uốn cong chiều ngang (horizontal) và sau dấu / là giá trị uốn cong chiều dọc (vertical). Trong trường hợp của bạn thì giá trị ngang phải lớn hơn giá trị dọc rất nhiều. Bạn có thể thay % bằng px hoặc em tuỳ ý.

có thể tham khảo thêm bài viết này css-tricks.com/almanac/properties/b/border-radius/

Đoilơ ViệtDesigner rât ít khi dùg em do nó tùy thuộc vào font-size mặc định của web...

Cám ơn Pangting nhé, it's work. Có điều đúng là làm kiểu này khá mệt, div dưới phải sử dụng :before/after để tạo concave nữa. Chắc crop hình thì dễ hơn.

uh tuỳ bạn cảm thấy thế nào tiện nhất thì làm mình thì thích có thể chỉnh từ code hơn vì sau này sửa đổi gì cũng dễ. Hình mất công upload lại

Sử dụng border-radius thì hay bị ko tương thích trình duyệt, có cái nó bo có cái nó ko chịu bo.

jadeeye

chính bạn bảo css3 cơ mà, chứ bạn muốn nó chạy trên ie7 lun à?

banbaonylong Thực ra mình cũng ko rành lắm về các ver của css. Chỉ muốn là khi run trên các trình duyệt thì tương thích với IE, Firefox, Chrome,... đừng bị tình trạng cái định dạng được cái ko định dạng đc.

bạn có thể tự cài các browser khác nhau để test mà

Đã test IE8 và ko nhận đc css. Mà người ta yêu cầu phải định dạng đc trên các browser.