CODEWITHSUNDEEP
windowslinuxfirefoxcss
rcs20
rcs20

Reputation: 605

css does not work in chrome (linux and windows)

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:

haflcircle

in firefox,

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

Upvotes: 6

Views: 629

Answers (2)

The Alpha
The Alpha

Reputation: 146201

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.

Upvotes: 1

Nate B
Nate B

Reputation: 6356

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.

Upvotes: 15

Related Questions