ブラウザの幅を超えてサークルを繰り返す方法

Question

cssとhtmlでサークルを作成しました。ブラウザのxディメンション全体で繰り返しています（下の画像を複製しようとしています）。私はbackground-image: x-repeatがあることを知っていますが、これは背景イメージではないので、私はそれを使用できませんし、サークルの中にコンテンツもあります。私はもともと9つのサークルを作成しようとしていましたが、それらを絶対的に配置しましたが、ブラウザが縮小した場合には最良の方法ではない可能性があります。その後、repeat-xプロパティが記憶されました。ここで思考の私の元の行の私のコードは次のとおりです。 HTMLコード

<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コード

.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: } 

Answer 1

あなたは、vwでvh単位

を css calc()を利用することができます

.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/