CODEWITHSUNDEEP
cssmaskmaskingclip
Marc P
Marc P

Reputation: 586

Can't get certain clip-paths to work

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

http://jsfiddle.net/foomarks/m5272/3/

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

Upvotes: 0

Views: 103

Answers (1)

Ana
Ana

Reputation: 37179

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.

Upvotes: 1

Related Questions