Anyone have easy way to create this using css and html?

Question

I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.

 .fline { width: 2px; background-color: black; height: 10px; margin-left: 30%; margin-top: -9px; } .fline1 { width: 2px; background-color: black; height: 10px; margin-left: 60%; margin-top: -10px; } .fline2 { width: 2px; background-color: black; height: 10px; margin-left: 88.2%; margin-top: -11px; }

 <hr style="width: 300px;margin-left: 30%;color:black"> <div class="fline"></div> <div class="fline1"></div> <div class="fline2"></div>

Answer 1

 .scale-container { width: 300px; } .scale { width: 296px; height: 20px; border: 2px solid black; border-bottom: none; } .scale>div { width: 50%; height: 20px; border-right: 2px solid black; } .label-container { width: 100%; display: flex; justify-content: space-between; }

 <div class="scale-container"> <div class="scale"> <div></div> </div> <div class="label-container"> <div>Low</div> <div>Average</div> <div>High</div> </div> </div>

Answer 2

In this way you can add as many items as you want.

 .p { display: flex; position: relative; padding-top: 15px; border-top: 2px solid red; margin-bottom: 30px; } .p div { position: relative; flex: 1; text-align: center; } .p div:after { content: ''; position: absolute; height: 15px; width: 2px; background: red; top: -15px; } .p div:not(:first-child):not(:last-child):after { left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } .p div:first-child { text-align: left; } .p div:first-child:after { left: 0; } .p div:last-child { text-align: right; } .p div:last-child:after { right: 0; }

 <div class="p"> <div> Low </div> <div> Average </div> <div> High </div> </div> <div class="p"> <div> Low </div> <div> Average -1 </div> <div> Average </div> <div> Average 1 </div> <div> High </div> </div> <div class="p"> <div> Low </div> <div> Average -2 </div> <div> Average -1 </div> <div> Average </div> <div> Average 1 </div> <div> Average 2 </div> <div> High </div> </div>

Answer 3

This is just a sample you can modify it to meet your requirments

 .box { display: flex; border-top:1px solid #000; } .box>div:not(:last-child) { border-left:1px solid #000; } .box>div:last-child { border-right:1px solid #000; } .box>div { flex: 1 1 auto; padding:10px; }

 <div class="box"> <div></div> <div></div> <div></div> </div>

Answer 4

 .box { display: flex; border-top:1px solid #000; } .box>div:not(:last-child) { border-left:1px solid #000; } .box>div:last-child { border-right:1px solid #000; } .box>div { flex: 1 1 auto; padding:10px; padding-top:40px; }

 <div class="box"> <div>Low</div> <div>Average</div> <div>High</div> </div>

Answer 5

 .grid{width:calc(100% - 20px);max-width:1000px;margin:0 auto;;border-top:3px solid red;display:flex;flex-direction:row;align-items:baseline;justify-content: space-between;} .fline{position:relative;overflow:hidden;min-height:40px;float: left;padding-top: 20px;} .fline::before{position:absolute;content:"";top:0;width:2px;height:20px;background:red} .fline:first-child::before{left:0} .fline:nth-of-type(2)::before{left:calc(50% - 2px)} .fline:last-child::before{left:unset;right:0}

 <div class="grid"> <div class="fline">Low</div> <div class="fline">High</div> <div class="fline">Average</div> </div>

Answer 6

 .fline { width: 2px; background-color: black; height: 10px; margin-left: 30%; margin-top: -9px; } .fline1 { width: 2px; background-color: black; height: 10px; margin-left: 60%; margin-top: -10px; } .fline2 { width: 2px; background-color: black; height: 10px; margin-left: 88.2%; margin-top: -11px; }

 <hr style="width: 300px;margin-left: 30%;color:black"> <div class="fline">Low</div> <div class="fline1">Average</div> <div class="fline2">High</div>

Answer 7

• First you need to define one outer wrap and define width as you want to this.
• And position:relative for this.
• For first inner div with float:left; and last with float:right; .
• And center div with position:absolute; with margin:auto ; from left and right;
• And margin-top depend on your parent div outer-wrap width for inner div like: fline,fline1,fline2

 .outer-wrap{ width: 80%; height: 1px; background-color: #000; margin: auto; text-align: center; position: relative; } .fline { width: 2px; background-color: black; height: 10px; float: left; margin-top: 1px; } .fline1 { width: 2px; background-color: black; height: 10px; position: absolute; top: 0; left: 0; right: 0; margin: auto; } .fline2 { width: 2px; background-color: black; height: 10px; float: right; margin-top: 1px; }

 <div class="outer-wrap"> <div class="fline"></div> <div class="fline1"></div> <div class="fline2"></div> </div>

Answer 8

This one is the right answer to this question

 .scale-container { width: 300px; } .scale { width: 296px; height: 20px; border: 2px solid black; border-bottom: none; } .scale>div { width: 50%; height: 20px; border-right: 2px solid black; } .label-container { width: 100%; display: flex; justify-content: space-between; }

 <div class="scale-container"> <div class="scale"> <div></div> </div> <div class="label-container"> <div>Low</div> <div>Average</div> <div>High</div> </div> </div>