i having multiple circles , trying connect circle divs line. so, should 2 lines connecting first , second & second , third. line should aligned circle center.
i trying make row relative , putting hr absolute position, turned out not working well.
i not sure best way implement work in responsive
.circle { width: 49%; padding-bottom: 49%; border-radius: 50%; background-color: purple; display: inline-block; } .container .row .col-xs-4 { padding-right: 0; padding-left:0; margin-left: 0; margin-right: 0; border: 1px solid black; text-align: center; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="circle"></div> </div> <div class="col-xs-4"> <div class="circle"></div> </div> <div class="col-xs-4"> <div class="circle"></div> </div> </div> </div>
since rectangles have 33.3% width each, add position: absolute div width: 66.6%, , place in middle. (if don't want pixel perfect, 50% top do, since line 1px)
.circle { width: 49%; padding-bottom: 49%; border-radius: 50%; background-color: purple; z-index: 2; position: relative; display: inline-block; } .container .row .col-xs-4 { padding-right: 0; padding-left:0; margin-left: 0; margin-right: 0; border: 1px solid black; text-align:center; } .container { position: relative; } .line { width: 66.6%; height: 1px; background: #000; position: absolute; top: 50%; left: 16.65%; /* half circle's width **/; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="circle"></div> </div> <div class="col-xs-4"> <div class="circle"></div> </div> <div class="col-xs-4"> <div class="circle"></div> </div> </div> <div class="line"></div> </div>
Comments
Post a Comment