What I want to create:

  1. Dotted border over each li element

  2. Point size and distance between them can be changed by settings in CSS or in SVG image

  3. The width of ul must be scalable, as well as the width of the border.

  4. Points should not be cropped when resizing the viewport . This means that only full (whole) circles should be visible.

I do not want this to happen , - (see extreme point) when resizing the viewport

enter image description here

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

repeated background image (repeating background images)

huge (very wide) background images

border-image

What I got:

I found a way, but it is really annoying. It works, but I have to create hundreds of (unnecessary) span elements, since I don’t know the maximum width of the element.

The idea is very simple: the points that do not fit are hidden - overflow: hidden;

 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; } 
 <ul> <li> <div> <span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span> <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> <span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span><span></span> </div> Item 2 </li> </ul>

Are there any other good ways to solve this problem using SVG gradients?

Source: How to create a border for a responsive element?

1 answer 1

border-image looks like a link to the image where it is located. You can control the size, and specify that the repetitions should be rounded - round to the 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 used PNG diamonds from MDN here, but you can easily create a PNG file (or SVG) with the desired dot shape.

Question answered - Paul LeBeau