CSS не работает в Chrome (Linux и Windows)

Question

у меня есть этот код:

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

которые производят:

в Firefox,

но в chrome (linux и windows - не пробовал в mac) ничего не вижу почему?

Answer 1

Я считаю, что это какая-то ошибка, на самом деле. Это работает для меня, если вы измените высоту и ширину на 1px. К сожалению, это оставляет небольшую белую точку, но это можно исправить, изменив фон на красный и фоновый клип на содержимое.

Пример JSFiddle.

Answer 2

Поскольку вы задали ширину 0px и высоту 0px для div, чтобы вы ничего не видели.

width: 0px;
height: 0px;

Измените это, надеюсь, это будет видно.