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> 

which produce:

in firefox,

but in chrome (linux and windows - did not try on mac) I don’t see anything why?

Answer 1

I think this is some kind of mistake. It works for me if you change the height and width by 1px. Unfortunately, this leaves a small white dot, but this can be eliminated by changing the background to red and the background clip to content.

JSFiddle example.

Answer 2

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

 width: 0px; height: 0px; 

Change it, hope it will be visible.