<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="or-spacer"> <div class="mask"></div> <span><i>nnnn</i></span> </div> <div class="or-spacer-vertical left"> <div class="mask"></div> </div> <div class="or-spacer-vertical right"> <div class="mask"></div> </div>

.or-spacer { margin-top: 100px; margin-left: 100px; width: 400px; position: relative; } .or-spacer .mask { overflow: hidden; height: 20px; } .or-spacer .mask:after { content: ''; display: block; margin: -25px auto 0; width: 100%; height: 25px; border-radius: 125px / 12px; box-shadow: 0 0 8px black; } .or-spacer span { width: 50px; height: 50px; position: absolute; bottom: 100%; margin-bottom: -25px; left: 50%; margin-left: -25px; border-radius: 100%; box-shadow: 0 2px 4px #999; background: white; } .or-spacer span i { position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; border-radius: 100%; border: 1px dashed #aaa; text-align: center; line-height: 40px; font-style: normal; color: #999; } .or-spacer-vertical { display: inline-block; margin-top: 100px; margin-left: 100px; width: 100px; position: relative; } .or-spacer-vertical .mask { overflow: hidden; width: 20px; height: 200px; } .or-spacer-vertical.left .mask:after { content: ''; display: block; margin-left: -20px; width: 20px; height: 100%; border-radius: 12px / 125px; box-shadow: 0 0 8px black; } .or-spacer-vertical.right .mask:before { content: ''; display: block; margin-left: 20px; width: 20px; height: 100%; border-radius: 12px / 125px; box-shadow: 0 0 8px black; }