Code https://jsfiddle.net/ph7913Lu/
How would I do that with this?
How would I make it look as close as possible?
Without the box shadow.
Would doing this come close to doing the top?
Maybe this is different from the top, I’m not sure.
I noticed being able to do this: https://www.facebook.com/facebook
Here is my attempt:
For the SVG or for just the circle, use addEventListener() with “click”.:
Alternatively you could wrap the SVG in an <a> element with href link.
How would your code be edited with this?
https://jsfiddle.net/xb58ey9t/
div {
margin: 16px auto;
background-color: #48abe0;
}
.semi-circle {
width: 320px;
height: 160px;
background-color: transparent;
border-radius: 160px 160px 0 0;
border: 1px solid red;
border-bottom: transparent;
}
or is this one better to use? https://jsfiddle.net/xb58ey9t/3/
<div class="top"></div>
div {
background: #9e978e;
display: inline-block;
margin: 0 16px 16px 0;
}
.top {
height: 45px;
width: 90px;
}
.top {
border-top-left-radius: 90px;
border-top-right-radius: 90px;
border: 1px solid red;
background-color: transparent;
border-bottom: transparent;
}
I’m using the :after element so don’t need a div for the circle. The technique is basically the same except yours has hard coded numbers for the sizes etc…
Here’s it added to my demo.
What if I don’t want the half circle attached to the button?
When it is part of the button, then that entire half circle is clickable.
In both instances, how do I hide or remove the border line from going through the circle?
Full circle
https://jsfiddle.net/jdmsqxp8/4/
.circle {
position: relative;
top: 3px;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 59px;
height: 59px;
border-radius: 50%;
background-color: #000;
/* Change this to your desired color */
border: 1px solid blue;
box-sizing: border-box;
}
Attempt at half a circle:
That didn’t work:
border-bottom: 1px solid black;
https://jsfiddle.net/y7ozkfL2/
<div class="half-circleA"></div>
<div class="btn-wrap">
<button class="exitE" type="button" title="Exit" aria-label="Exit"></button>
</div>
.half-circleA {
z-index: 1;
position: relative;
top: 3px;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 57px;
height: 30px;
background-color: transparent;
border-top-left-radius: 110px;
border-top-right-radius: 110px;
border: 1px solid blue;
border-bottom: 1px solid black;
}
oh, wait.
adding: pointer-events:none;
Would make it not clickable.
.exitE:after {
content: "";
position: absolute;
z-index: -1;
background: #121212;
left: -11px;
top: -11px;
width: 57px;
height: 30px;
border: 1px solid blue;
border-bottom: transparent;
border-radius: 30px 30px 0 0;
pointer-events:none;
}
Still, if I don’t want the half circle/circle attached to the exit button, how would the above codes be adjusted? Post #8
I tried using z-index, that didn’t work to hide the line from going through the circle.
You have to hide it with the background color on the button and on the half circle as in my example. You already had a background-color on the button anyway so I assumed it wasn’t an issue.
If you want the button transparent then you’d need to use 2 more pseudo elements for the left and right lines instead of the border on the wrapper.
Like this:
I just added a gradient to the body so you could see its working.
I have edited the CodePen in Post #2 so only the circle is clickable.
It will work if you follow my demo.
You haven’t layered them correctly. The :after element is z-index:-1 and the button is z-index:auto.
Have just been playing with custom-elements (new to me), using Archibald’s hr-circle.
Probably not of use, but an interesting exercise.
I did it:
Half circle
https://jsfiddle.net/057rk1xh/
<div class="btn-wrap">
<div class="circle"></div>
</div>
.btn-wrap {
position: relative;
padding: 0 0;
margin: 47px 0 0;
border-top: 1px solid #0059dd;
}
.circle {
position: relative;
top: -32px;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 57px;
height: 30px;
border-radius: 57px 57px 0 0;
background-color: #000;
border: 1px solid #0059dd;
border-bottom:1px solid black;
}
Yes but at the cost of 2 empty divs that don’t even hold the button!
My last demo is much cleaner and more useful and doesn’t rely on backgrounds to rub things out.
Why border-radius: 30px 30px 0 0;
And not: border-radius: 57px 57px 0 0; ?
The element is only 57px wide so can’t have a border radius of 57px. The maximum is 57px / 2 but as half pixels aren’t really a think anything above 29px will be the same as it can’t be bigger than half its width if both sides have the border-radius applied. I just 30px as that was the height but really the radius should be 29px (or 28.5px except that may get rounded down to 28px and be a pixel out).
The element is only 57px wide so can’t have a border radius of 57px. The maximum is 57px / 2 but as half pixels aren’t really a think anything above 29px will be the same as it can’t be bigger than half its width if both sides have the border-radius applied. I just used 30px as that was the height but really the radius should be 29px (or 28.5px except that may get rounded down to 28px and be a pixel out).
Prompt: I want to do a half circle.
What is the best way to write this?
.exitE:after {
content: "";
position: absolute;
z-index: -1;
left: -11px;
top: -11px;
width: 57px;
height: 29px;
border: 1px solid blue;
border-bottom: transparent;
border-radius: 29px 29px 0 0;
pointer-events: none;
}
.exitE:after {
content: "";
position: absolute;
z-index: -1;
left: -11px;
top: -11px;
width: 57px;
height: 30px;
border: 1px solid blue;
border-bottom: transparent;
border-radius: 30px 30px 0 0;
pointer-events: none;
}
.exitE:after {
content: "";
position: absolute;
z-index: -1;
left: -11px;
top: -11px;
width: 57px;
height: 30px;
border: 1px solid blue;
border-bottom: transparent;
border-radius: 57px 57px 0 0;
pointer-events: none;
}
.exitE:after {
content: "";
position: absolute;
z-index: -1;
left: -11px;
top: -11px;
width: 57px;
height: 28.5px;
border: 1px solid blue;
border-bottom: transparent;
border-radius: 28.5px 28.5px 0 0;
pointer-events: none;
}
From Bing Copilot:
All of the code snippets you provided will create a half-circle, but they will look slightly different because of the different height and border-radius values.
The border-radius property defines the radius of the circle, and the height property defines the height of the half-circle. If you want a perfect half-circle, the height should be half of the width, and the border-radius should be the same as the width.
So, the best way to create a perfect half-circle would be:
CSS https://jsfiddle.net/u9tsf34d/1/
.exitE:after { content: ""; position: absolute; z-index: -1; left: -11px; top: -11px; width: 57px; height: 28.5px; /* half of the width */ border: 1px solid blue; border-bottom: transparent; border-radius: 57px 57px 0 0; /* same as the width */ pointer-events: none; }
This will create a half-circle with a diameter of 57px. The border-radius of 57px 57px 0 0 makes a half-circle on the top. The border-bottom: transparent makes the bottom half of the circle invisible. The height: 28.5px is half of the width, which ensures the element is a perfect half-circle.
AI is saying to use this: border-radius of 57px 57px 0 0
From Copilot:
You’re correct in your understanding. The
border-radiusproperty in CSS defines the radius of the circle, and for a perfect circle, theborder-radiusshould be half of thewidthof the element.However, when creating a half-circle, the
border-radiuscan be the same as thewidthof the element. This is because theborder-radiusis applied to each corner of the element, and in the case of a half-circle, the bottom corners have no effect as the bottom border is transparent.So, if the
widthof the element is57px, aborder-radiusof57px 57px 0 0will create a perfect half-circle on the top. Theheightshould still be half of thewidthto ensure the element is a perfect half-circle.