<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="d-flex justify-content-center p-5 mt-5 text-black" style="height: 100px"> <div class="d-inline-flex mb-3" style="height: 100px"> <div class="p-2 weight"></div> <div class="align-self-center p-1 rod"></div> <div class="p-2 weight"></div> </div> <div class="d-inline-flex mb-3 ml-5 pl-5" style="height: 100px"> <div class="p-2 weight"></div> <div class="align-self-center p-1 rod"></div> <div class="p-2 weight"></div> </div> </div> <div class="d-flex justify-content-center p-5 mt-5 text-black" id="fancy" style="height: 100px"> <div class="d-inline-flex mb-3" style="height: 100px"> <div class="p-2 weight-node-left"></div> <div class="p-2 weight-less"></div> <div class="p-2 weight"></div> <div class="align-self-center p-1 rod"></div> <div class="p-2 weight"></div> <div class="p-2 weight-less"></div> <div class="p-2 weight-node-right"></div> </div> <div class="d-inline-flex mb-3 ml-3" style="height: 100px"> <div class="p-2 weight-node-left"></div> <div class="p-2 weight-less"></div> <div class="p-2 weight"></div> <div class="align-self-center p-1 rod"></div> <div class="p-2 weight"></div> <div class="p-2 weight-less"></div> <div class="p-2 weight-node-right"></div> </div> </div>

.rod { background: #607D8B; width: 130px; height: 20px; } .weight { width: 60px; border-radius: 45px; background: #673AB7; position: relative; overflow: hidden; } .weight:before { content: ""; width: 60px; background: #9C27B0; height: 16px; position: absolute; left: -17px; top: 7px; transform: rotate(130deg); } .weight:after { content: ""; width: 60px; background: #009688; height: 16px; position: absolute; right: -21px; bottom: 9px; transform: rotate(130deg); } /***** Fancy double weight *****/ #fancy .rod { background: #607D8B; width: 130px; height: 20px; } #fancy .weight { width: 25px; border-radius: 45px; background: #673AB7; position: relative; overflow: hidden; } #fancy .weight-less{ width: 25px; border-radius: 45px; background: #673AB7; position: relative; overflow: hidden; height: 66%; margin-top: 6%; } #fancy .weight-node-left{ border-radius: 0px; background: #607D8B; position: relative; overflow: hidden; height: 20px; margin-top: 15%; border-top-left-radius:10px; border-bottom-left-radius:10px; } #fancy .weight-node-right{ border-radius: 0px; background: #607D8B; position: relative; overflow: hidden; height: 20px; margin-top: 15%; border-top-right-radius:10px; border-bottom-right-radius:10px; } #fancy .weight:before { content: ""; width: 60px; background: #9C27B0; height: 16px; position: absolute; left: -17px; top: 7px; transform: rotate(130deg); } #fancy .weight:after { content: ""; width: 60px; background: #009688; height: 16px; position: absolute; right: -21px; bottom: 9px; transform: rotate(130deg); }