Asked Nov 21st, 2019 2:24 a.m. 149 0 6
  • 149 0 6
0

CSS hình khối

Share
  • 149 0 6

Cái banner của mình phải chia làm 2, 1 bên hình khối cạnh không đều bên trái, 1 bên là hình ảnh. Các bác cho mình hỏi css hình khối kia kiểu gì, hoặc có link nào hướng dẫn cho mình xin với. Mình cảm ơn!

Nov 21st, 2019 2:59 a.m.

6 ANSWERS


Answered Nov 21st, 2019 2:28 a.m.
0

đơn giản nhất là lấy cả cái ảnh dài đó làm nền cho banner, cái phần text thì bạn tạo khối div và css text bên trong cho nó thôi nó thôi.

Share
Avatar hieu nguyen @hieuhumg
Nov 21st, 2019 2:32 a.m.

cái ảnh bên tay phải thay đổi được bạn ah

0
| Reply
Share
Avatar Lê Vĩnh Thiện @le.vinh.thien
Nov 21st, 2019 2:49 a.m.

@hieuhumg mình thấy cái ảnh bên phải đang khá là đồng màu với cái bên trái, đổi đi nó hơi lạ. mình nghĩ là chỉ đổi cái text thôi thì sẽ okie hơn.

0
| Reply
Share
Answered Nov 21st, 2019 2:29 a.m.
0

ở đây nó là cái ảnh thì phải bạn ạ chứ không phải css đâu

Share
Avatar hieu nguyen @hieuhumg
Nov 21st, 2019 2:32 a.m.

cái ảnh bên phải thay đổi được bạn ah, còn khối bên trái giữ nguyên

0
| Reply
Share
Answered Nov 21st, 2019 2:52 a.m.
0

để cái trái zindex cao hơn, và dùng cái này https://css-tricks.com/the-shapes-of-css/ chiều dài banner là 100%, thì ảnh chiếm khoảng 70%, và shape bên trái 50%

Share
Answered Nov 21st, 2019 3:01 a.m.
0

adfd.png bạn inspect nhìn code là dc mà!! =))

Share
Nov 21st, 2019 3:03 a.m.
0
| Reply
Share
Answered Nov 21st, 2019 8:29 a.m.
0

bác xem thử thuộc tính clip-path coi có đúng ko

Share
Answered Nov 26th, 2019 2:51 a.m.
0

Thường thì các banner họ sẽ không dùng trực tiếp thẻ img mà sẽ đặt thành background của một thẻ div nào đó. Lợi ích của việc này là:

  • Bạn có thể thêm các nội dung các đè lên trên ảnh một cách đơn giản và dễ làm.
  • Khi kích thước div banner bị thay đổi khi co giãn thì khi set background sẽ hạn chế việc méo ảnh khi kết hợp background-size: cover

Bạn có thể chuyển ảnh thành background, phần nội dung bên trong bạn vẫn có thể thêm được như bình thường, CSS cho nó hiển thị ở bên trái banner. Mỗi ảnh là một cái div.banner, tùy thuộc bố cục của ảnh và nội dung ở vị trí nào mà bạn sẽ cần CSS. và CSS theo nhiều screen phổ biến để hỗ trợ responsive.

Share
Viblo
Let's register a Viblo Account to get more interesting posts.