Draw a circle with four horizontal empty stripes/lines inside the circle in CSS

Hello,
I need to figure out this hard task, draw this kind of lines/stripes which are empty and horizontal and without border, not exactly what you see on this picture but something like this:


Is it even possible? Hardest task ever…please help me with it:
.circle {
** width: 300px;**
** height: 300px;**
** background: black;**
** border-radius: 150px;**
}
this is all Ive done so far… but how I can add this clear horizontal lines?

See if this gets close to what you are after.
It’s not wavy lines, but it is …‘not exactly what you see on this picture’

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>circle with stripes</title>
<style>
.circle {
    width: 300px;
    height: 300px;
    box-sizing:border-box;
    background: #fff;
    border: 5px solid #000;
    border-radius: 150px;
    position: relative;
    overflow:hidden;
}
    .circle::before,
    .circle::after {
        content:"";
        position:absolute;
        top:0; left:0;
        width:100%;
        height:30px;
        background:#000;
    }
    .circle::after {top:auto;bottom:0}

.circle span {
    position:absolute;
    top:130px; left:0;
    width: 100%;
    height: 30px;
    background: #000;
}
    .circle span::before,
    .circle span::after {
        content:"";
        position:absolute;
        top:-65px; left:0;
        width:100%;
        height:30px;
        background:#000;
    }
    .circle span::after {top:auto;bottom:-65px}
</style>
</head>

<body>

<div class="circle">
    <span></span>
</div>

</body>
</html>
1 Like

without this three lines its perfection!!! thank you so much :slight_smile:

1 Like

Hmm, if you remove border-radius it’s no longer a circle.
I’m confused why you removed those rules

My bad, one line more…4:00 AM in the morning :smiley:

I see, you wanted a ‘circle of stripes’ without the border.

Yes, that would do it

Your Welcome :slight_smile:

@matthew4773, Actually this can be done much easier than the code I posted above.

I had forgot about using a repeating-linear-gradient

That can get the job done with one div and 5 rules in the css

I had to change the height in order to get a multiple of 9 ( 297 or 306), I went with 306px


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>circle with stripes</title>
<style>
.circle {
    width: 306px;
    height: 306px;
    border-radius: 153px;
    overflow:hidden;
    background-image: repeating-linear-gradient(180deg,black,black 34px,white 34px,white 68px);
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>
2 Likes

Hi, Ray. The OP didn’t want the outer border, huh? That makes a difference.

I haven’t used repeating linear gradient so I did it the hard way.

Fully fluid, though. Just pick a width: px, %, em, etc.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>circle w stripes</title>
<!--
https://www.sitepoint.com/community/t/draw-a-circle-with-four-horizontal-empty-stripes-lines-inside-the-circle-in-css/284935/6
-->
    <style>
.ring {
    width:30%;
    margin:0 auto;
}
.ring::before {
    content:"";
    display:block;
    padding-top:100%;
    background:linear-gradient(to bottom,black 0,black 11.1%,white 11.1%,white 22.2%,black 22.2%,black 33.3%,white 33.3%,white 44.4%,black 44.4%,black 55.5%,white 55.5%,white 66.6%,black 66.6%,black 77.7%,white 77.7%,white 88.8%,black 88.8%,black 100%);
    border-radius:50%;
}
    </style>
</head>
<body>

<div class="ring"></div>

</body>
</html>
3 Likes

Ron, here’s another version using your % gradient as repeating, along with vw for width/height.
Of course it doesn’t scale dragging the browser window corner, but scales nicely dragging the width.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>circle with stripes</title>
<style>
.circle {
    width: 35vw; max-width:300px;
    height: 35vw; max-height:300px;
    border-radius: 50%;
    background: repeating-linear-gradient(180deg,black,black 11.1%,white 11.1%,white 22.2%);
}
</style>
</head>
<body>

<div class="circle"></div>

</body>
</html>
3 Likes

Discussion continues at