CODEWITHSUNDEEP
css
akcasoy
akcasoy

Reputation: 7225

CSS - How to change border height in linear-gradient?

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%) 0 0 0 1;

i want the border ends where the last list item bullet ends. Can i achieve this with the border-image property? Or is this possible at all? By the way the height of the list items may vary, not every item has the exact same height.

So this should be the result:

enter image description here

Upvotes: 0

Views: 138

Answers (1)

wlh
wlh

Reputation: 3525

If you would be able to know the height of the either the ul or at least the last li, then a css only solution is definitely possible; otherwise, it gets tricky.

The linear-gradient function takes four values (see https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Values), one of which is the color-stop-list. If you set one stop to end and another to begin at the same point (either a percentage or a length, such as pixels), then you get a solid line at that stop with the defined or default angle.

So, you can get the gradient to stop at a fixed pixel point as follows:

linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #b3b3b3 20%, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px))

Here, I am changing from the main color to a color with opacity: 0 at a point 25px from the full height of the box (since we are using to bottom). You can try to eyeball this for you project, or use JavaScript via Element.getBoundingClientRect().height (see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) on the last li to calculate the position of the list-item-type based on how you define that in your css.

To answer the question in your last comment, use the same logic and set a stop point 20px in:

linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #b3b3b3 20px, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px))

Having said this you may consider handling the border on each individual li rather than on the ul, which would make it much easier to handle without JavaScript. You would then only need to supply linear-gradient values on the ul>li:first-child and ul>li:last-child using the principles above. Just keep in mind that if you use margin-top or margin-bottom on any li in the list, you will see gaps in your border.

Upvotes: 1

Related Questions