Đường viền CSS bị lởm chởm với các đường viền có kích thước/màu khác nhau

Question

Có vẻ như khi bạn có một phần tử có đường viền có kích thước/màu khác nhau, bạn có thể thấy một đường răng cưa rất lạ xảy ra. Tôi chưa bao giờ nhận thấy điều này trước đây, nhưng đã nhìn vào thiết kế siêu nóng của Vimeo khi tôi nhận thấy điều này (không thực sự muốn nói "trục trặc") xuất hiện kỳ ​​lạ.

Vì vậy, nếu bạn đã có một div treo ra, kiểu như ở dưới đây, bạn sẽ nhận thấy một bàn đạp pixel (gần giống như nó được thiết lập để inset, chứ không phải là rắn ...)

div { 
    height   : 25px; 
    width    : 50px; 
    background  : #eee; 
    border-style  : solid; 
    border-color  : green; 
    border-left-color : black; 
    border-width  : 3px 3px 3px 15px; 
} 

Bất cứ ai cũng nhận thấy điều này/biết tại sao nó xảy ra?

Answer 1

Lý do điều này xảy ra là vì nó tạo ra một 'khung' xung quanh hộp.

Hãy nghĩ đến khung hình bằng gỗ, bạn không sử dụng bốn miếng gỗ hình chữ nhật để tạo khung, bạn sử dụng 4 miếng hình thang và ghép chúng lại với nhau. Khi bạn đặt chiều rộng lớn hơn ở một bên, đường chéo của nó sẽ hiển thị chiều rộng về phía góc của hộp.

Lý do có vẻ xấu là do việc chống răng cưa giữa các biên giới chưa bao giờ tốt.

Alternative

Bạn chỉ có thể làm div:before{border-left: 15px solid #000;} nếu bạn không muốn biên giới cắt như thế.

Answer 2

Đó không phải là "trục trặc" - đó là cách biên giới hoạt động. Chúng kết nối theo đường chéo.

Nếu bạn mang nó một bước xa hơn và tạo ra một <div> không có chiều cao và chiều rộng, nhưng một biên giới lớn bạn có thể xem kết quả - http://jsfiddle.net/mFzrA/

BTW - đây là kỹ thuật được sử dụng để tạo ra hình tam giác CSS tinh khiết và bong bóng lời thoại. Bạn chỉ cần làm cho 3 đường viền trong suốt và thứ 4 cho bạn một hình tam giác đẹp.

Answer 3

Tôi chỉ muốn đề xuất sử dụng hộp bóng trên đường viền có chiều rộng đường viền lớn hơn để tránh "đường lởm chởm". Làm việc cho tôi, hy vọng điều đó sẽ giúp ích cho bạn :)

div { 
    height   : 25px; 
    width    : 50px; 
    background  : #eee; 
    border-style  : solid; 
    border-color  : green; 
    border-width  : 3px 3px 3px 0px; 
    box-shadow:-15px 0px black; 
}