CODEWITHSUNDEEP
css
akcasoy
akcasoy

Reputation: 7225

CSS - linear-gradient - How to make the gradient part of border constant, not percentual?

I have the following table:

enter image description here

and this css for the table border:

border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #b3b3b3 20%, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px)) 0 0 0 1;

Currently the gradient part of the border is percentual. So when i have 1000 items in my list, the border of the first ~20 items will not be seen. How can i make the length of gradient part constant? So the beginning of the border seems always same regardless of the list item count?

Upvotes: 0

Views: 52

Answers (1)

Temani Afif
Temani Afif

Reputation: 274236

Considering all your previous questions about the same issue (CSS - How to change border height in linear-gradient? / How to make a border left with custom bullet for my list, in a gradient style?) I would recomment another way to tackle this layout and avoid the different issues:

ul {
   background:
      /*top part always the same height (60px)*/
      linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #b3b3b3 100%) 22.5px 0/3px 60px,
      /*bottom part*/
      linear-gradient(#b3b3b3,#b3b3b3) 22.5px 60px/3px calc(100% - 70px);
   background-repeat:no-repeat;
   overflow:hidden;
   margin:5px 0;
}

li {
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 5px;
  list-style: none;
  position: relative;
}

li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: grey;
}
/*hide the non needed part of the gradient*/
li:last-child::after {
  content: "";
  position: absolute;
  left: -20px;
  top: 23px;
  width: 8px;
  height: 100vh;
  background: #ededed;
 
}

body {
  background: #ededed;
}
<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text<br>125 886</li>
</ul>

<ul>
  <li>Some text</li>
  <li>Some text</li>
</ul>
<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text<br> 5465 654</li>
  <li>Some text<br> 5465 654</li>
  <li>Some text<br> 5465 654</li>
  <li>Some text<br> 5465 654</li>
  <li>Some text<br> 5465 654</li>
</ul>

Upvotes: 1

Related Questions