CODEWITHSUNDEEP
htmlcss
TobiasW
TobiasW

Reputation: 891

How to partially overlay a circle with a third of a circle?

I want a picture circle which has a label in the lower half which has a background. I think I post a jsfiddle so that you can understand what I want : http://jsfiddle.net/Lf65Z/

So this is my css:

#container {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 400px;
    height: 400px;
    background: red;
    border: 1px solid #999;
    border-radius: 1000px;
}

#labelbackground {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 400px;
    height: 200px;
    background: rgba(165, 165, 165, 0.62);
    border-bottom-left-radius: 1000px;
    border-bottom-right-radius: 1000px;
}

This gives me a background for 50% of the circle. But I want to overlay just something like 33% of the circle, something like this: http://jsfiddle.net/Lf65Z/1/

#labelbackground {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 400px;
    height: 150px;
    background: rgba(165, 165, 165, 0.62);
    border-bottom-left-radius: 1000px;
    border-bottom-right-radius: 1000px;
}

But as you can see its not really doing what I want... Is there any possibility to just cut off the 50% background, so that it keeps the right border-radius?

Upvotes: 1

Views: 2011

Answers (1)

Kiril
Kiril

Reputation: 2963

Simply add overflow: hidden; to the container. See here: http://jsfiddle.net/deVRd/

Edit: for case with slider you may use gradients. See http://jsfiddle.net/C7mc7/. Read more about CSS3 gradients here and easily create your own here.

Upvotes: 6

Related Questions