Draw a line through a circle
I'm getting trouble with drawing a line through a circle.
I'd like to have a line that also adapt to the div height, this is what I tried so far :
<html>
<body>
<div class="item">
<div class="item__level opacity-10">
<div class="item__level__round"></div>
<div class="item__level__line"></div>
</div>
</div>
</body>
</html>
And CSS
.item{
width: 100%;
height: 40px;
}
.item__level{
width: 10%;
position: relative;
height: 100%;
}
.item__level__round{
width: 20px;
height: 20px;
background: #1F8AEE;
border-radius: 50%;
position: absolute;
transform: translateX(50%) translateY(50%);
}
.item__level__line{
position: absolute;
border-left: 2px solid red;
left: 12%;
top: 0;
height: 100%;
}
https://codepen.io/anon/pen/eQMdjm
It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while
css
asked Nov 22 '18 at 15:49
TLRTLR
1792416
add a comment |
I'm getting trouble with drawing a line through a circle.
I'd like to have a line that also adapt to the div height, this is what I tried so far :
<html>
<body>
<div class="item">
<div class="item__level opacity-10">
<div class="item__level__round"></div>
<div class="item__level__line"></div>
</div>
</div>
</body>
</html>
And CSS
.item{
width: 100%;
height: 40px;
}
.item__level{
width: 10%;
position: relative;
height: 100%;
}
.item__level__round{
width: 20px;
height: 20px;
background: #1F8AEE;
border-radius: 50%;
position: absolute;
transform: translateX(50%) translateY(50%);
}
.item__level__line{
position: absolute;
border-left: 2px solid red;
left: 12%;
top: 0;
height: 100%;
}
https://codepen.io/anon/pen/eQMdjm
It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while
css
asked Nov 22 '18 at 15:49
TLRTLR
1792416
"It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while" - It would take less than a minute to verify this by counting pixels in your screenshot (using Paint or so).
– GolezTrol
Nov 22 '18 at 15:51
Just did that. Looks like in the posted screenshot, the circle is dead center.
– GolezTrol
Nov 22 '18 at 15:53
like this? you could always use the pseudo element :after.
– B.J. A.A.
Nov 22 '18 at 15:54
Perfect thanks, thats exactly what I looked for
– TLR
Nov 22 '18 at 16:00
add a comment |
I'm getting trouble with drawing a line through a circle.
I'd like to have a line that also adapt to the div height, this is what I tried so far :
<html>
<body>
<div class="item">
<div class="item__level opacity-10">
<div class="item__level__round"></div>
<div class="item__level__line"></div>
</div>
</div>
</body>
</html>
And CSS
.item{
width: 100%;
height: 40px;
}
.item__level{
width: 10%;
position: relative;
height: 100%;
}
.item__level__round{
width: 20px;
height: 20px;
background: #1F8AEE;
border-radius: 50%;
position: absolute;
transform: translateX(50%) translateY(50%);
}
.item__level__line{
position: absolute;
border-left: 2px solid red;
left: 12%;
top: 0;
height: 100%;
}
https://codepen.io/anon/pen/eQMdjm
It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while
css
asked Nov 22 '18 at 15:49
TLRTLR
1792416
I'm getting trouble with drawing a line through a circle.
I'd like to have a line that also adapt to the div height, this is what I tried so far :
<html>
<body>
<div class="item">
<div class="item__level opacity-10">
<div class="item__level__round"></div>
<div class="item__level__line"></div>
</div>
</div>
</body>
</html>
And CSS
.item{
width: 100%;
height: 40px;
}
.item__level{
width: 10%;
position: relative;
height: 100%;
}
.item__level__round{
width: 20px;
height: 20px;
background: #1F8AEE;
border-radius: 50%;
position: absolute;
transform: translateX(50%) translateY(50%);
}
.item__level__line{
position: absolute;
border-left: 2px solid red;
left: 12%;
top: 0;
height: 100%;
}
https://codepen.io/anon/pen/eQMdjm
It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while
css
css
asked Nov 22 '18 at 15:49
TLRTLR
1792416
asked Nov 22 '18 at 15:49
TLRTLR
1792416
asked Nov 22 '18 at 15:49
TLRTLR
1792416
asked Nov 22 '18 at 15:49
TLRTLR
1792416
asked Nov 22 '18 at 15:49
TLRTLR
1792416
1792416
"It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while" - It would take less than a minute to verify this by counting pixels in your screenshot (using Paint or so).
– GolezTrol
Nov 22 '18 at 15:51
Just did that. Looks like in the posted screenshot, the circle is dead center.
– GolezTrol
Nov 22 '18 at 15:53
like this? you could always use the pseudo element :after.
– B.J. A.A.
Nov 22 '18 at 15:54
Perfect thanks, thats exactly what I looked for
– TLR
Nov 22 '18 at 16:00
add a comment |
"It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while" - It would take less than a minute to verify this by counting pixels in your screenshot (using Paint or so).
– GolezTrol
Nov 22 '18 at 15:51
Just did that. Looks like in the posted screenshot, the circle is dead center.
– GolezTrol
Nov 22 '18 at 15:53
like this? you could always use the pseudo element :after.
– B.J. A.A.
Nov 22 '18 at 15:54
Perfect thanks, thats exactly what I looked for
– TLR
Nov 22 '18 at 16:00
"It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while" - It would take less than a minute to verify this by counting pixels in your screenshot (using Paint or so).
– GolezTrol
Nov 22 '18 at 15:51
"It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while" - It would take less than a minute to verify this by counting pixels in your screenshot (using Paint or so).
– GolezTrol
Nov 22 '18 at 15:51
Just did that. Looks like in the posted screenshot, the circle is dead center.
– GolezTrol
Nov 22 '18 at 15:53
Just did that. Looks like in the posted screenshot, the circle is dead center.
– GolezTrol
Nov 22 '18 at 15:53
like this? you could always use the pseudo element :after.
– B.J. A.A.
Nov 22 '18 at 15:54
like this? you could always use the pseudo element :after.
– B.J. A.A.
Nov 22 '18 at 15:54
Perfect thanks, thats exactly what I looked for
– TLR
Nov 22 '18 at 16:00
Perfect thanks, thats exactly what I looked for
– TLR
Nov 22 '18 at 16:00
add a comment |
1 Answer
1
active
oldest
votes
update - Sorry, I just reread your question. Yea the line could be off by a pixel depending on the widths. Check this fiddle for an example https://jsfiddle.net/Hastig/pzo4fe2a/ (red line is 20px wide and blue line is 21px. It doesn't cut a pixel in half so the full 1px difference appears to the right (in FF) instead of a half pixel on left and the second half on right. If you're doing percentage widths and heights the issue can occur in responsive design because you can't control the device width.
original answer - Try adding left: 50% and top 50% to your circle and line and use the -50% to compensate and keep it centered.
.container {
display: relative;
width: 100vw;
height: 100vh;
}
.circle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 100%;
}
.line {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2%;
height: 100%;
background-color: skyblue;
}<div class="container">
<div class="circle"></div>
<div class="line"></div>
</div>Play with the fiddle pane to see it respond to viewscreen size.
https://jsfiddle.net/Hastig/7d8ebqxm/
answered Nov 22 '18 at 16:29
Hastig ZusammenstellenHastig Zusammenstellen
2,64011734
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434459%2fdraw-a-line-through-a-circle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
update - Sorry, I just reread your question. Yea the line could be off by a pixel depending on the widths. Check this fiddle for an example https://jsfiddle.net/Hastig/pzo4fe2a/ (red line is 20px wide and blue line is 21px. It doesn't cut a pixel in half so the full 1px difference appears to the right (in FF) instead of a half pixel on left and the second half on right. If you're doing percentage widths and heights the issue can occur in responsive design because you can't control the device width.
original answer - Try adding left: 50% and top 50% to your circle and line and use the -50% to compensate and keep it centered.
.container {
display: relative;
width: 100vw;
height: 100vh;
}
.circle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 100%;
}
.line {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2%;
height: 100%;
background-color: skyblue;
}<div class="container">
<div class="circle"></div>
<div class="line"></div>
</div>Play with the fiddle pane to see it respond to viewscreen size.
https://jsfiddle.net/Hastig/7d8ebqxm/
answered Nov 22 '18 at 16:29
Hastig ZusammenstellenHastig Zusammenstellen
2,64011734
add a comment |
update - Sorry, I just reread your question. Yea the line could be off by a pixel depending on the widths. Check this fiddle for an example https://jsfiddle.net/Hastig/pzo4fe2a/ (red line is 20px wide and blue line is 21px. It doesn't cut a pixel in half so the full 1px difference appears to the right (in FF) instead of a half pixel on left and the second half on right. If you're doing percentage widths and heights the issue can occur in responsive design because you can't control the device width.
original answer - Try adding left: 50% and top 50% to your circle and line and use the -50% to compensate and keep it centered.
.container {
display: relative;
width: 100vw;
height: 100vh;
}
.circle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 100%;
}
.line {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2%;
height: 100%;
background-color: skyblue;
}<div class="container">
<div class="circle"></div>
<div class="line"></div>
</div>Play with the fiddle pane to see it respond to viewscreen size.
https://jsfiddle.net/Hastig/7d8ebqxm/
answered Nov 22 '18 at 16:29
Hastig ZusammenstellenHastig Zusammenstellen
2,64011734
add a comment |
update - Sorry, I just reread your question. Yea the line could be off by a pixel depending on the widths. Check this fiddle for an example https://jsfiddle.net/Hastig/pzo4fe2a/ (red line is 20px wide and blue line is 21px. It doesn't cut a pixel in half so the full 1px difference appears to the right (in FF) instead of a half pixel on left and the second half on right. If you're doing percentage widths and heights the issue can occur in responsive design because you can't control the device width.
original answer - Try adding left: 50% and top 50% to your circle and line and use the -50% to compensate and keep it centered.
.container {
display: relative;
width: 100vw;
height: 100vh;
}
.circle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 100%;
}
.line {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2%;
height: 100%;
background-color: skyblue;
}<div class="container">
<div class="circle"></div>
<div class="line"></div>
</div>Play with the fiddle pane to see it respond to viewscreen size.
https://jsfiddle.net/Hastig/7d8ebqxm/
answered Nov 22 '18 at 16:29
Hastig ZusammenstellenHastig Zusammenstellen
2,64011734
update - Sorry, I just reread your question. Yea the line could be off by a pixel depending on the widths. Check this fiddle for an example https://jsfiddle.net/Hastig/pzo4fe2a/ (red line is 20px wide and blue line is 21px. It doesn't cut a pixel in half so the full 1px difference appears to the right (in FF) instead of a half pixel on left and the second half on right. If you're doing percentage widths and heights the issue can occur in responsive design because you can't control the device width.
original answer - Try adding left: 50% and top 50% to your circle and line and use the -50% to compensate and keep it centered.
.container {
display: relative;
width: 100vw;
height: 100vh;
}
.circle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 100%;
}
.line {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2%;
height: 100%;
background-color: skyblue;
}<div class="container">
<div class="circle"></div>
<div class="line"></div>
</div>Play with the fiddle pane to see it respond to viewscreen size.
https://jsfiddle.net/Hastig/7d8ebqxm/
.container {
display: relative;
width: 100vw;
height: 100vh;
}
.circle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 100%;
}
.line {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2%;
height: 100%;
background-color: skyblue;
}<div class="container">
<div class="circle"></div>
<div class="line"></div>
</div>.container {
display: relative;
width: 100vw;
height: 100vh;
}
.circle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: skyblue;
border-radius: 100%;
}
.line {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 2%;
height: 100%;
background-color: skyblue;
}<div class="container">
<div class="circle"></div>
<div class="line"></div>
</div>answered Nov 22 '18 at 16:29
Hastig ZusammenstellenHastig Zusammenstellen
2,64011734
edited Nov 22 '18 at 16:38
answered Nov 22 '18 at 16:29
Hastig ZusammenstellenHastig Zusammenstellen
2,64011734
answered Nov 22 '18 at 16:29
Hastig ZusammenstellenHastig Zusammenstellen
2,64011734
answered Nov 22 '18 at 16:29
Hastig ZusammenstellenHastig Zusammenstellen
2,64011734
2,64011734
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53434459%2fdraw-a-line-through-a-circle%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
"It seems like the red line is not perfectly in the center of the circle, is it an optic illusion ? I'm on this since a while" - It would take less than a minute to verify this by counting pixels in your screenshot (using Paint or so).
– GolezTrol
Nov 22 '18 at 15:51
Just did that. Looks like in the posted screenshot, the circle is dead center.
– GolezTrol
Nov 22 '18 at 15:53
like this? you could always use the pseudo element :after.
– B.J. A.A.
Nov 22 '18 at 15:54
Perfect thanks, thats exactly what I looked for
– TLR
Nov 22 '18 at 16:00