CODEWITHSUNDEEP
css
user784637
user784637

Reputation: 16092

How to use css to crop parts of an image

I have the following background image

enter image description here

How would I use only css to make only 3/4ths of the outer ring visible and selectable like so:enter image description here

I was able to make only a circle visible and selectable using

a.outer-ring{
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;

However I couldn't figure out how to remove an inner circle and how to remove 1/4th of the circle (like a pizza slice).

Upvotes: 3

Views: 795

Answers (2)

sandeep
sandeep

Reputation: 92803

Yes you can Achieve this with pure css. Check this

http://jsfiddle.net/QLrJj/9/

Upvotes: 0

csswizardry
csswizardry

Reputation: 591

I wholeheartedly wouldn't recommend it, but http://jsfiddle.net/csswizardry/QLrJj/1/ (clearer: http://jsfiddle.net/csswizardry/QLrJj/)

EDIT: I got quite into this idea; here's a pretty neat knockout effect http://jsfiddle.net/csswizardry/QLrJj/8/show/ based on this that I wrote http://csswizardry.com/2011/11/create-a-notched-current-state-nav/

H

Upvotes: 3

Related Questions