4

What I want to create:

  • a dotted border on top of each li-element
  • the size of the dots and margin between them can change by tweaking the CSS or the image/SVG used)
  • the width of the ul is responsive, so the border's width varies, too
  • dots should not be cut/truncated when resizing the viewport, that means only full cirlces should be visible

tl;dr: I don't want this to happen (see the last dot?) when resizing the viewport:

enter image description here

I can't think of a way to create this using:

  • repeated background image
  • a huge (very long) background image
  • border-image

What I got:

I figured out a way to solve it, but it's really annoying. It works, but I would have to generate hundreds of (unecassary) span-elements as I don't know the maximum width of the element.

The idea is very simply: Dots that don't fit, float into the hidden overflow.

Source

HTML

<ul>
  <li>
    <div>
      <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    Item 1
  </li>
  <li>
    <div>
      <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    Item 2
  </li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 60px;
}

ul > li div {
  overflow: hidden;
  height: 2px;
}

ul > li div span {
  float: left;
  width: 2px;
  height: 2px;
  margin: 0 4px 0 0;
  background: grey;
}

JSFiddle

You can try it here

Is there a classy way to solve this, like using some nice SVG- or gradient-trick?

20
  • So that's your math behind the not cut a dot? How many dots should be than visible? Than happens to the dots when the element resizes? Apr 26, 2016 at 15:38
  • @RokoC.Buljan The (naive) solution I have simply floats the elements into a invisible new row once they won't fit. So the dots never get cut visually.
    – lampshade
    Apr 26, 2016 at 15:43
  • @RokoC.Buljan I want as many dots as necessary be visible (like a border). When you resize the preview in the fiddle you can see the effect. That same as when repeating a background image.
    – lampshade
    Apr 26, 2016 at 15:45
  • Yes, "dots" wrapping is possible using elements only. Repeated images / SVG are not aware of their "dots" so.... AFIAK it's impossible. Example using radial bg: jsbin.com/vugiso/1/edit?html,css,output < but yeah it's an image therefore gets cut-off. Apr 26, 2016 at 15:49
  • @RokoC.Buljan "AFIAK it's impossible" - oh boy, it seems that way. I coulnd't think of an alternative solution either. With really small dots, this ain't a problem, but with bigger elements, it starts looking wierd. Thanks for your help and patience with my wording.
    – lampshade
    Apr 26, 2016 at 15:51

5 Answers 5

6
+50

border-image seems like the way to go to me. You can control the size, and specify that the repeats be rounded to your desired width.

li {
  font-size: 40px;
}

.small {
  border: solid transparent;
  border-width: 15px 0 0;
  border-image:url("https://mdn.mozillademos.org/files/4127/border.png") 27 27 round;
}

.large {
  border: solid transparent;
  border-width: 30px 0 0;
  border-image:url("https://mdn.mozillademos.org/files/4127/border.png") 27 27 round;
}
<ul>
  <li class="small">First list item</li>
  <li class="large">Second list item</li>
</ul>

I've used a diamond-form PNG from the MDN site here, but you should be able to create a PNG (or SVG) with your desired dot shape easily enough.

3
  • Thanks, this is close. It seems that it doesn't work properly in Safari. Also Firefox skewing on resize is relative extreme. Chrome does it smoother somehow.
    – lampshade
    Apr 28, 2016 at 13:16
  • The firefox display is ok for me ... May be depends on FF version ?
    – vals
    Apr 30, 2016 at 7:31
  • Still the best solution even though It doesn't work in Safari 8 (didn't test 9) - unfortunately. Thanks again.
    – lampshade
    May 5, 2016 at 9:46
2

Here is an example using svg :

function getCenterDotPosition( position, dotWidth ) {
  return ( dotWidth / 2 ) + ( position ) * dotWidth * 2;
}
function getRightPosition( position, dotWidth ) {
  return getCenterDotPosition( position, dotWidth ) + dotWidth/2;
}

function getSVG( options ) {
  var width = options.width;
  var height = options.dotWidth;
  var svg = '<svg class="top-dot" width="' + width + 'px" height="' + height + 'px">';
  var left;
  var radius = options.dotWidth / 2;
  var i = 0;
  var right = getRightPosition( i, options.dotWidth );
  while( right < width ) {
    center = getCenterDotPosition( i, options.dotWidth );
    svg += '<circle cx="' + center + '" cy="' + radius + '" r="' + radius + '" stroke="none" stroke-width="0" fill="' + options.color + '" />';
    i++;
    right = getRightPosition( i, options.dotWidth );
  }
  svg += '</svg>';
  return svg;
}

function generateDots() {
  var options = {
    width    : $('ul').first().innerWidth(),
    dotWidth : 2,
    color    : 'grey'
  };
  var svg = getSVG( options );
  $( 'li svg.top-dot' ).remove()
  $( 'li' ).prepend( svg ); 
}


generateDots();
$( window ).resize(function() {
  generateDots();  
});
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 60px;
  width: 50%;
}

svg.top-dot {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

1
  • Thanks for you effort. Even though this might work, it is even more overhead then the solution in the question, where I simply could clone some 100 elements with JavaScript that float into the hidden space when needed. No code running on resize needed which I always see as a last resort. But still a neat solution that could be made more versatile simply.
    – lampshade
    May 5, 2016 at 9:50
0

Simple and straight forward test it with rest of the browsers and get back to me [Tested on firefox chrome opera and ie 11].To check it use it in full screen and resize the browser

round: the image tiles to fill the area, and is rescaled if necessary to avoid dividing tiles.

li {
  padding: 5px;
  border-style: dotted;
  border-color: rgba(213, 126, 0, 1);
  list-style: none;
  border-width: 15px;
  border-image: url("http://f.cl.ly/items/0V28170w0f0k3t3S2p0g/dots.svg") 33% round;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}
<ul>
  <li>First Element</li>
  <li>second Element</li>
  <li>third Element</li>
</ul>

0

I'd simply add a <hr/> tag above each <ul>.
Is this something you was after?

<div>
  <hr/>
  <ul> 
    <li>Item 1</li>
  </ul>
  <hr/>
  <ul> 
    <li>Item 2</li>
  </ul>
</div>



hr{
  width:100%;
  color:#333;
  border-top: dotted 3px;
}

ul > li div span {
  float: left;
  width: 2px;
  height: 2px;
  margin: 0 4px 0 0;
  background: grey;
}
0

li {
  font-size: 40px;
}

.small {
  border: solid transparent;
  border-width: 15px 0 0;
  border-image:url("https://i.stack.imgur.com/Esozt.jpg") 30 30 round;
}

.large {
  border: solid transparent;
  border-width: 30px 0 0;
  border-image:url("https://i.stack.imgur.com/Esozt.jpg") 30 30 round;
}
<ul>
  <li class="small">1st list item</li>
  <li class="large">2n list item</li>
  <li class="small">3rd list item</li>
</ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.