Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi jadeeye, 19/8/13.

Lượt xem: 3,936

  1. jadeeye Mới đăng kí

    Chào các bạn,

    Mình đang thiết kế giao diện site theo template bằng css3, nhưng không biết làm cách nào cho bottom của nơi để banner uốn cong như hình dưới:

    [​IMG]

    Bạn nào biết cách để css lên div để nó cong giống như vậy thì giúp mình với. Cám ơn nhiều.

    ...
  2. NetworkBlend

    NetworkBlend Thành viên cấp 2

    Phần đấy hình như là dùng hình ảnh chèn vô
    jadeeye thích bài viết này
  3. danghong

    danghong Thành viên cấp 2

    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
    Nguyễn Tôm thích bài viết này
  4. Mèo Heo

    Mèo Heo Admin Việt Font

  5. Đoilơ ViệtDesigner

    Đoilơ ViệtDesigner Thành viên cấp 5

    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 :v nhưng ko khả thi.
    jadeeye thích bài viết này
  6. jadeeye

    jadeeye Mới đăng kí

    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.
  7. banbaonylong

    banbaonylong Ko phải assmin

     border-radius: 0 0 999px 999px;
    chỉnh 2 số cuối 1 hồi sao cho hợp là tùy ở bạn
    jadeeye thích bài viết này
  8. jadeeye

    jadeeye Mới đăng kí

    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.
  9. banbaonylong

    banbaonylong Ko phải assmin

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

    HoangTiger Mới đăng kí

    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ì [​IMG]
  11. Đoilơ ViệtDesigner

    Đoilơ ViệtDesigner Thành viên cấp 5

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

    Pangting Thành viên cấp 1

    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/
    jadeeye thích bài viết này
  13. banbaonylong

    banbaonylong Ko phải assmin

  14. jadeeye

    jadeeye Mới đăng kí

    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.
  15. Pangting

    Pangting Thành viên cấp 1

    uh tuỳ bạn cảm thấy thế nào tiện nhất thì làm :D 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 :D
  16. jadeeye

    jadeeye Mới đăng kí

    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.
  17. banbaonylong

    banbaonylong Ko phải assmin

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

    jadeeye Mới đăng kí

    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.
  19. banbaonylong

    banbaonylong Ko phải assmin

    bạn có thể tự cài các browser khác nhau để test mà :D
  20. jadeeye

    jadeeye Mới đăng kí

    Đã 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.
Từ khóa:

Ủng hộ diễn đàn