css does not work in chrome (linux and windows)

Question

i have this code:

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

that produce:

in firefox,

but in chrome (linux, and windows - didnt try in mac) i see nothing why?

Answer 1

I believe it is some sort of bug, actually. It works for me if you change the height and width to 1px. This leaves a little white dot, unfortunately, but that can be fixed by changing the background to red and the background-clip to content.

JSFiddle example.

Answer 2

Because you gave 0px width and 0px height to the div so you see nothing.

width: 0px;
height: 0px;

Change this, hope it'll be visible.