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:
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>
without this three lines its perfection!!! thank you so much 
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 
I see, you wanted a ‘circle of stripes’ without the border.
Yes, that would do it
Your Welcome
@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>
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>
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>
Discussion continues at