How to make a responsive circle with transparent horizontal lines inside it in CSS?

HTML & CSS
1

Hello,
I’m really desperate with this. I want to make a responsive circle and inside this circle will be transparent horizontal lines and you can easily change their size and positions.
please, no svg
Something like this:

400×400 4.33 KB

Here is my code so far: (BUT it is NOT responsive, lines are NOT transparent, only good thing is that you can change lines easily with px and %):

.circle {
  box-sizing: content-box;
  width: 300px;
  height: 300px;
  position: absolute;
  border: none;
  border-radius: 150px;
  background: linear-gradient(white, white),
  linear-gradient(white, white),
  linear-gradient(white, white), linear-gradient(white, white),
  linear-gradient(white, white)black;
  background-repeat: no-repeat;
  background-position: 90% 90%, 55% 75%, 90% 10%, 95% 30%, 90%;
  background-origin: padding-box;
  background-size: 124px 20px, 153px 20px, 124px 20px, 153px 20px, 80px 20px;
}

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

EDIT
Reference Topic
Draw a circle with four horizontal empty stripes/lines inside the circle in CSS
Mittineague

2

Use % in place of px.

Use transparent instead of white
There will be more to it than that, as in its current state that will just show the black which covers the whole circle, you will need to redesign how the gradients work to use transparent.

Think of creating the inverse image, adding the black bits instead of the white bits.

1 Like
3

No possibility to do it that way Sam. I want to make them transparent, no invisible. Probably, I have to use something different than gradient. But I really do not know what.:sob:

4

It can works just like I say

In your example code you have a black background and add white blocks to it.

What you must do instead is use the exact same method to have a transparent background and add black blocks to it.

5

I have never tried it, but from the examples it looks like transparent and alpha channel could be used.

6

Hi there matthew4773,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/160% verdana, arial, helvetica, sans-serif;
 }

#circle {
    width: 32vw;
    height: 32vw;
    border-radius: 50%;
    margin: auto;
    background-color: #000;
    background-image: linear-gradient( to right, #fff 0, #fff 60%, transparent 60%, transparent 100% ),
                      linear-gradient( to right, #fff 0, #fff 65%, transparent 65%, transparent 100% ),
                      linear-gradient( to right, transparent 0, transparent 15%, #fff 15%, #fff 85%, transparent 85% ,transparent 100% ),
                      linear-gradient( to right, transparent 0, transparent 35%, #fff 35%, #fff 100% ),
                      linear-gradient( to right, transparent 0, transparent 25%, #fff 25%, #fff 100% );
    background-repeat: no-repeat;
    background-size: 100% 2vw;
    background-position: 0 4vw, 0 9vw, 0 15vw, 0 21vw, 0 26vw;
 }
</style>

</head>
<body> 

  <div id="circle"></div>

</body>
</html>

coothead

7

:duh: Fixed dimensions are not responsive. Even though you were given responsive code in the previous thread, it doesn’t look like you’ve tried to incorporate it into your code.

Our fault, of course.

amazing.

The next big question: Why the transparency? What will be visible behind those transparent lines?

It’s a pain in the derrier to try to work when relevent information is withheld.

8

It may be possible by using clip-path masks with polygon shapes but as Ron said we really need to know the whole story.

I’m sure svg could do it also but you don’t seem to want svg.

I would probably do it using a large transparent gif turned into a data uri as a background image as the simplest approach.

Of course if the transparent gaps need to be controlled independently then svg or clip path masks are probably the best bet although I haven’t tried either yet:)

9

This is it using the method I described:-

SVG is exactly the way to do this.

8 Likes
10

Nice :slight_smile:

There’s more than one way to skin a cat though :slight_smile:

And another a little simpler and easier to animate and change each line.

7 Likes
11

Sam!!! I don’t know how to thank you! This is it. You are css expert :smiley:

3 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.