Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Andrew Young
Andrew Young
Courses Plus Student 639 Points

Having a 1/4 circle at top right corner

So I have this fiddle which can create a 1/4 circle, but I want to just show the 1/4 circle (not showing the 3/4 white circle part) and also put it in the top right corner of the webpage, how can I achieve it?

For those who don't want to open fiddle here is the code:

HTML:

<pie class="twentyfive"></pie>

CSS:

pie {
    width: 5em;
    height: 5em;
    /* display: block; */
    border-radius: 50%;
    background-color: blue;
    border: 2px solid green;
    /* float: right; */
    margin: 1em;
    position: fixed;
    top: 0;
    right:0;
}

.twentyfive {
    background-image:
        linear-gradient(360deg, transparent 50%, white 50%),
        linear-gradient(270deg, white 50%, transparent 50%);
}

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I think I have your solution. Take a look at this and see if this is what you're after:

pie {
    width: 5em;
    height: 5em;
    /* display: block; */
    border-radius: 50%;
    background-color: blue;
    /*border: 2px solid green;*/
    /* float: right; */
    margin: 1em;
    position: fixed;
    top: 0;
    right:0;
}

.twentyfive {
    background-image:
        linear-gradient(180deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

Hope this helps! :sparkles:

Andrew Young
Andrew Young
Courses Plus Student 639 Points

It get what I want for the 1/4 circle part but i want it to be put on top right corner as what it display in the following image

demo image

P.S. Just ignore the size and the angle (pretend it's 90 degree)

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ah! Sorry, I was misunderstanding what you were asking. First, you will need to remove the border. But then you just need to set the margin to be negative half of the size of the circle.

Take a look:

pie {
    width: 5em;
    height: 5em;
    /* display: block; */
    border-radius: 50%;
    background-color: blue;
    /* removed border otherwise it looks odd */
    /* float: right; */
    margin: -2.5em;   /* margin negative half of the width and height of the circle */
    position: fixed;
    top: 0;
    right:0;
}

.twentyfive {
    background-image:
        linear-gradient(360deg, transparent 50%, white 50%),
        linear-gradient(270deg, white 50%, transparent 50%);
}

Hope this is what you're looking for! :sparkles: