Linear gradient with custom size

user_4858133 0
Viewed 217

I have this design:

enter image description here

It's already created with html/css but I need to remove the extra linea for 1 and 5. This was achieved by adding a position absolute element to create the grey line but the size of the container's dot is responsive.

My idea was creating a background linear-gradient for each container like so:

for all:

background: linear-gradient(to right, grey 100%, transparent 0);

for the first one:

background: linear-gradient(to left, grey 50%, transparent 0);

for the last one:

background: linear-gradient(to right, grey 50%, transparent 0);

but I don't know how to make it smaller:

enter image description here

css
2 Answers

Assuming that all items have equal widths, then the gradient should start at the midpoint of 1 and end at the midpoint of 5, which means it should start at the 10% mark and end at the 90% mark, something like linear-gradient(to right, transparent 10%, grey 10%, grey 90%, transparent 90%).

To restrict the size of the background, you can use background-size: 100% [DESIRED_HEIGHT] to control it. Say you want the bar to be 16px thick, then you can use background-size: 100% 16px. Combine that with background-repeat: no-repeat to avoid the gradient from repeating, and background-position: center center to center it.

See proof-of-concept example:

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  
  background-image: linear-gradient(to right, transparent 10%, grey 10%, grey 90%, transparent 90%);
  background-size: 100% 8px;
  background-repeat: no-repeat;
  background-position: center center;
}

ul.colors {
  background-image: linear-gradient(
    to right,
    transparent 10%,
    red 10%,
    red 30%,
    orange 30%,
    orange 50%,
    green 50%,
    green 70%,
    blue 70%,
    blue 90%,
    transparent 90%
  );
}

ul li {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #999;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
<strong>Plain</strong>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<br /><br />
<strong>Colors</strong>
<ul class="colors">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

user_3959100

Another idea is to consider negative margin on the first and last item equal to half the size:

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:linear-gradient(grey 0 0) center/100% 10px no-repeat;
}


ul li {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid #999;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul li:first-child {
  margin-left:-24px;
}
ul li:last-child {
  margin-right:-24px;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

user_86203330
Related