Can't get certain clip-paths to work

Question

I know this is super simple, but I can't seem to get a simple ellipse masking to work in this example:

img {
position: absolute;
-webkit-clip-path: ellipse(200px,200px,50px,100px);    
}

Anyone have any hints as to what I'm doing incorrectly.

(My understanding is that it's not necessary to create SVG paths for basic shapes: http://www.html5rocks.com/en/tutorials/masking/adobe/)

score 1 · Answer 1 · answered Sep 01 '14 at 13:16

The syntax for shapes has changed at the beginning of this year.

It's:

inset(<margin>[ round <border-radius>]?) for rectangle - demo (<margin> and <border-radius> values are exactly like the values for the margin and border-radius properties respectively)
circle([<radius>]?[ at <position>]?) for circle - demo (similar to how you specify radial gradients)
ellipse([<radius>{1,2}]?[ at <position>]?) for ellipse - demo
the same for generic polygon

The new syntax for shapes is supported by Chrome 34+, Opera 21+ and Safari 8.

Also, the clip property mentioned in that article has been deprecated.

1 Answers1