CODEWITHSUNDEEP
javascripthtmlcss
danny taki
danny taki

Reputation: 450

How to repeat a circle across browser width

I created the circle with css and html and I want to have it repeat across the x-dimension of the browser (trying to replicate the image shown below). I know there's background-image: x-repeat, but this isn't a background image, so I cant use that and there will also be content inside the circle. I was originally trying to create 9 circles, then absolutely position them, but I realized that it may not be the best way and won't work if the browser shrinks. Then remembered the repeat-x property. Here's my code of my original line of thinking: HTML Code

<div class="circles">
          <div id="half-circle1"></div>
          <div id="circle1"></div>
          <div id="circle2"></div>
          <div id="circle3"></div>
          <div id="circle4"></div>
          <div id="circle5"></div>
          <div id="circle6"></div>
          <div id="circle7"></div>
          <div id="half-circle2"></div>
        </div><!-- end of circles -->

CSS Code

.circles div { width: 199px; height: 199px; background-color: #60c5ca; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0; left: 0;  }

    #half-circle1 { top: 255px; left: 0px;; width: 100px; border-radius:0 100px 100px 0; opacity: 0.6;}
    #half-circle2 { top: 0; left: 0; width: 100px;  border-radius: 100px 0 0 100px; opacity: 0.6;  }

    #circle1 { top: 235px; left: 50px; opacity: 0.5; }
    #circle2 { top: 285px; left: 200px; opacity: 0.6; }
    #circle3 { top: 235px; left: 300px; opacity: }
    #circle4 { top: 235px; left: 300px; opacity: }
    #circle5 { top: 235px; left: 300px; opacity: }
    #circle6 { top: 235px; left: 300px; opacity: }
    #circle7 { top: 235px; left: 300px; opacity: }

enter image description here

Upvotes: 1

Views: 85

Answers (1)

guest271314
guest271314

Reputation: 1

You can utilize css calc() with vw, vh units

.circles div {
  width: 199px;
  height: 199px;
  background-color: #60c5ca;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

#half-circle1 {
  top: 255px;
  left: calc(0vw);
  width: 100px;
  border-radius: 0 100px 100px 0;
  opacity: 0.6;
}

#half-circle2 {
  top: 235px;
  left: calc(90vw + 50px);
  width: 100px;
  border-radius: 100px 0 0 100px;
  opacity: 0.6;
}

#circle1 {
  top: 235px;
  left: calc(10vw - 50px);
  opacity: 0.5;
}

#circle2 {
  top: 285px;
  left: calc(20vw);
  opacity: 0.6;
}

#circle3 {
  top: 235px;
  left: calc(30vw);
  opacity: 0.7;
}

#circle4 {
  top: 235px;
  left: calc(40vw);
  opacity: 0.5;
}

#circle5 {
  top: 235px;
  left: calc(50vw);
  opacity: 0.5;
}

#circle6 {
  top: 235px;
  left: calc(60vw + 50px);
  opacity: 0.6;
}

#circle7 {
  top: 235px;
  left: calc(70vw + 100px);
  opacity: 0.7;
}
<div class="circles">
  <div id="half-circle1"></div>
  <div id="circle1"></div>
  <div id="circle2"></div>
  <div id="circle3"></div>
  <div id="circle4"></div>
  <div id="circle5"></div>
  <div id="circle6"></div>
  <div id="circle7"></div>
  <div id="half-circle2"></div>
</div>

jsfiddle https://jsfiddle.net/Lu1xwkre/1/

Upvotes: 1

Related Questions