javascript - Any one has an idea how to make this in CSS so it is responsive? -

javascript - Any one has an idea how to make this in CSS so it is responsive? -

i'm wondering how accomplish in css (and less , jquery :)

i have slider, looks this:

i want this:

the fonts of curse no problem, not making stuff round , on, removing border , stuff...

i'm wondering how can accomplish little pins: in css, keeps right dimensions, , squeezes when screen-size different. way, bunch danielcrisp, for awesome slider angularjs.

any help appreciated.

came solution http://codepen.io/anon/pen/bkdas

html:

<div class="slider"> <div class="pin"> </div> <div class="pin"> </div> <div class="pin"> </div> <div class="pin"> </div> <div class="pin"> </div> <div class="pin"> </div> <div class="pin"> </div> <div class="pin"> </div> <div class="pin"> </div> <div class="pin"> </div> </div>

css:

.slider{ width:500px; height:20px; border-bottom:2px solid red; } .slider .pin{ height:100%; width:10%; float:left; border-right:2px solid red; transform: translatey(55%); box-sizing: border-box; } .slider .pin:last-child{ display:none; }

might easier accomplish using javascript though appending divs within slider

javascript css css3