Linear gradient questions

HTML & CSS
1

Is there any way to make this image with linear-gradient without using a border?

3

I have merged these two topics as they seem to be closely related.

Your code in the second post (and your fiddle) is incomplete.

4

Is this possible?

5

I just did it.


.box {
	width: 100px;
	height: 100px;
	margin: auto;
	background: #000;
	border: 25px solid transparent;
	border-image: linear-gradient(to right, red 0%,red 60%, red 61%, red 100%);
	border-image-slice: 1;
}

<div class="box"></div>
6

Many things are possible with css gradients.

But why do you specifically want to use linear gradients for this instead of easier methods like border?

7

8

Does that mean you have found a satisfactory answer to your question and don’t need any further assistance?

(I’m confused as to why you’ve now posted Paul’s Pen with no comment or explanation.)

9

Yes, I found the answer.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.