CSS
#bigBox {
width:800px;
height: 300px;
}
#leftBox {
float:left;
height:300px;
width: 390px;
background: pink;
margin:0;
border-radius: 100px 0 0 0;
}
#rightBox {
float:right;
height:300px;
width: 390px;
background: pink;
border-radius:0 0 100px 0;
}
Đã trả lời ngày 20 tháng 5 năm 2013 lúc 14:49May 20, 2013 at
14:49
1
Trong CSS3, bạn có thể đạt được một cái gì đó tương tự như phân chia div
,CSS3 you can achieve something similar to dividing the div
,
Bằng cách sử dụng các đối tượng giả :before
và :after
.
Xem bản demo
Chỉnh sửa: Tôi biết nó có thể được thực hiện trong các kịch bản khác Lang nhưng tôi muốn nó trong CSS và tôi biết điều đó là có thể. Cảm ơn.May 20, 2013 at 14:42
Martin Turjakmartin TurjakMartin Turjak
20.6K5 Huy hiệu vàng55 Huy hiệu bạc76 Huy hiệu đồng5 gold badges55 silver badges76 bronze badges
2
Có lẽ bạn có nghĩa là một cái gì đó như thế này?
#bigBox div {
height: 300px;
background: pink;
width:45%;
}
#leftBox {
border-radius: 100px 0 0 0;
float:left;
}
#rightBox {
border-radius: 0 0 100px 0;
float:right;
}
//jsfiddle.net/Qxjxj/
Đã trả lời ngày 20 tháng 5 năm 2013 lúc 14:48May 20, 2013 at 14:48
BorgtexborgtexBorgtex
3.1851 Huy hiệu vàng18 Huy hiệu bạc25 Huy hiệu đồng1 gold badge18 silver
badges25 bronze badges
1
#bigBox {
border-radius: 100px 0 100px 0;
height: 300px;
background: pink;
}
#leftBox {
float:left;
}
#rightBox {
float:right;
}
0
Điều này sẽ cung cấp cho bạn hiệu ứng mà bạn đang tìm kiếm.
Đã trả lời ngày 20 tháng 5 năm 2013 lúc 14:41May 20, 2013 at 14:41
RyanryanRyan
874 huy hiệu đồng4 bronze badges
0
Đặt pixel là không hữu ích. Và bạn không cần ba ID CSS. Mã của tôi là chất lỏng hơn mặc dù người dùng tăng chiều rộng của cửa sổ trình duyệt, trang sẽ duy trì giao diện người dùng. //jsfiddle.net/spkmm/8/ xem mã này
Ở đây tôi chỉ sử dụng hai s trong html
Và chỉ được sử dụng 2 khối CSS, một phần dành cho phần bên trái, tiếp theo là cho phần phải.
#bigLeftBox {
border-radius: 100px 0 0 0;
height: 100px;
width:49%;
background: pink;
float:left;
}
#bigRightBox {
border-radius: 0 0 100px 0;
height: 100px;
width:49%;
background: green;
float:right;
}
Đã trả lời ngày 20 tháng 5 năm 2013 lúc 16:25May 20, 2013 at 16:25