css không hoạt động trong chrome (linux và windows)

Question

tôi có mã này:

<style type="text/css"> 
div { 
margin: 100px auto; 
width: 0px; 
height: 0px; 
border-right: 30px solid transparent; 
border-top: 30px solid red; 
border-left: 30px solid red; 
border-bottom: 30px solid transparent; 
border-top-left-radius: 30px; 
border-top-right-radius: 30px; 
border-bottom-left-radius: 30px; 
border-bottom-right-radius: 30px; 
position: relative; 
} 
</style> 
<div></div> 

sản xuất:

trong firefox,

nhưng trong chrome (linux , và cửa sổ - không thử trong mac) tôi thấy không có gì tại sao?

Answer 1

Tôi tin rằng đó thực sự là một loại lỗi. Nó hoạt động cho tôi nếu bạn thay đổi chiều cao và chiều rộng thành 1px. Điều này để lại một chấm nhỏ màu trắng, thật không may, nhưng điều đó có thể được sửa bằng cách thay đổi màu nền thành màu đỏ và background-clip thành nội dung.

JSFiddle example.

Answer 2

Bởi vì bạn đã cho 0px 0px chiều rộng và chiều cao cho div vì vậy bạn không thấy gì.

width: 0px; 
height: 0px; 

Thay đổi điều này, hy vọng nó sẽ hiển thị.