Tips for designing a responsive element with a repeating border

Question

Tips for designing a responsive element with a repeating border

Desired Design:

Create a dotted border on top of each li-element
Adjust the size of the dots and spacing between them using CSS or image/SVG manipulation
Make the width of the ul responsive for varying border widths
Ensure that dots are not partially displayed when resizing the viewport, only full circles should be visible

In Brief: I want to avoid this issue (visible in the last dot?) while resizing the window:

https://i.sstatic.net/Esozt.jpg

I have ruled out these methods for achieving this effect:

Using a tiled background image
Utilizing an enormous background graphic
Implementing border-image

Solution Attempt:

I discovered a solution, although it requires tedious work. It functions by utilizing numerous unnecessary span elements since the maximum element width is unknown.

The concept is simple: 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

Test it here

Is there an elegant approach to address this, perhaps through inventive SVG or gradient techniques?

html css svg border

Answer 1

Answer №1

border-image is the ideal solution in my opinion. You have the flexibility to control the size and specify that the repeats are 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 opted for a diamond-shaped PNG from the MDN website, but you can easily create a PNG (or SVG) with your preferred dot shape.

Answer 2

border-image is the ideal solution in my opinion. You have the flexibility to control the size and specify that the repeats are 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 opted for a diamond-shaped PNG from the MDN website, but you can easily create a PNG (or SVG) with your preferred dot shape.

Answer 3

Answer №2

Below is an illustration showcasing the usage of SVG:

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

function generateSVG( options ) {
  var width = options.width;
  var height = options.dotWidth;
  var svgContent = '<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 = findMidpointDotLocation( i, options.dotWidth );
    svgContent += '<circle cx="' + center + '" cy="' + radius + '" r="' + radius + '" stroke-width="0" fill="' + options.color + '" />';
    i++;
    right = getRightPosition( i, options.dotWidth );
  }
  svgContent += '</svg>';
  return svgContent;
}

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

displayDots();
$( window ).resize(function() {
  displayDots();  
});

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>Item 2</li>
</ul>

Answer 4

Below is an illustration showcasing the usage of SVG:

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

function generateSVG( options ) {
  var width = options.width;
  var height = options.dotWidth;
  var svgContent = '<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 = findMidpointDotLocation( i, options.dotWidth );
    svgContent += '<circle cx="' + center + '" cy="' + radius + '" r="' + radius + '" stroke-width="0" fill="' + options.color + '" />';
    i++;
    right = getRightPosition( i, options.dotWidth );
  }
  svgContent += '</svg>';
  return svgContent;
}

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

displayDots();
$( window ).resize(function() {
  displayDots();  
});

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>Item 2</li>
</ul>

Answer 5

Answer №3

Run a simple and direct test on various browsers and report back to me with the results. Make sure to test it on Firefox, Chrome, Opera, and IE 11. View it in full screen mode and resize the browser for accuracy.

The image tiles are rounded to fill the area and will be rescaled if needed to prevent tile division.

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>

Answer 6

Run a simple and direct test on various browsers and report back to me with the results. Make sure to test it on Firefox, Chrome, Opera, and IE 11. View it in full screen mode and resize the browser for accuracy.

The image tiles are rounded to fill the area and will be rescaled if needed to prevent tile division.

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>

Answer 7

Answer №4

To improve the structure, I would suggest inserting a <hr/> tag above every <ul>.
Does this align with what you were looking for?

<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;
}

Answer 8

To improve the structure, I would suggest inserting a <hr/> tag above every <ul>.
Does this align with what you were looking for?

<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;
}

Answer 9

Answer №5

li {
  font-size: 40px;
}

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

.large {
  border: solid transparent;
  border-width: 30px 0 0;
  border-image:url("https://i.sstatic.net/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>

Answer 10

li {
  font-size: 40px;
}

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

.large {
  border: solid transparent;
  border-width: 30px 0 0;
  border-image:url("https://i.sstatic.net/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>

Tips for designing a responsive element with a repeating border

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Completely triggering a forced refresh on a single page application, disregarding cache, service workers, and all other

Floating elements within scrolling loading

Non-clickable image

What could be causing the issue of my p tag not being centered within both of my content divs?

Adjust Scale to Less than 1 in JVectorMap

What is the best strategy for managing pagination when dealing with a large number of pages?

How to link a sandbox file in HTML with an iPhone

"Utilize jQuery to load a file when hovering over a specific

How can I turn off the animation for a q-select (quasar select input)?

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

Interactive calendar feature displaying events upon hovering over a date

How can I extract the page's output using JQuery?

Eliminate the navigation bar background using MaterializeCSS

The BBCode seems to be malfunctioning

Having trouble changing the Font Awesome icon on click?

Obtain the identifier of a div within nested HTML components by utilizing jQuery

Strange Behavior of HTML5 Audio Elements

Utilizing Sage 9 to Customize Woocommerce Templates

Attempting to arrange six images in a row using dividers

Content is the main driver for CSS Flexbox dynamic aspect-ratio code