can we use border and border image at the same time?
can we use border and border image at the same time?
81 Replies
No, but you can use outline or box shadow as substitutes for the extra border. You could also create a before or after that has its own border.
yeah i am using after, can you share any resource to convert svg path converter
I don't understand the question. You want to convert an SVG to a path that can be used in something like a clip path? You don't need any converter for that. You can just copy and paste the part of the SVG code that specifies the path.
so basically i am using this svg for clipping my div:
and for the border image of the ::after i am using the svg i am having:
so bascially i want to convert the the clipping svg's path same as the image i am using for the after
Just use the string value of d in the path element.
this is what i am currently
its not working actually
I think you asked about this several weeks ago and I shared a codepen with proof that it works but you never looked at it.
That was you: https://codepen.io/chooking/pen/poqvVrN
I explained before that the only issue was the scale. Your SVG path is much larger than you need and there is no automated way to scale that path wihin CSS, so you had to do the math on it.
yeah i did try this, but the height is giving me the issue
I know. That's because you have a scale transform in your SVG that makes the path the right size. That can't be done with the CSS.
also i think it is clipping the internal div instead of just the border of the div
The math is simple. You have a 0.1 scale, so you only need to divide all values by 10.
what can be done?
Simple math, but tedious. Divide all numbers in the path by 10.
any resource for it? π
or shall i just use some js
I was suggesting to do it by hand, but you could write a program if you want.
by hand is a lot of hassle, will write a function
as i assumed its clipping the internal div too
is there any way to check if the clipping is done right?
Apply it to a div that is filled with a solid color.
It is clipping the inside. The codepen that I shared used a div filled with a solid color but the interior is white. The SVG should not have a hole in it. It should fully cover the portion of the area that you want to keep when clipping.
yep it is clipping internally
i have child divs inside of it, maybe they are causing the issue?
You have to fill the shape in the software that you used to create the SVG.
No. The problem is your path. The SVG is not a solid shape. It's an outline of a shape.
got it from figma
also where would i add the fill?
as we r just using the path on the clip-path
I was referring to filling it in vector graphics software, not in the CSS code.
man this svg thing is a mess
There is an easier solution that I just realized. In the path code, the letter M appears twice. Delete everything starting with the second M. That part is code that cuts out the inside.
Starting with "m1197"
kk i worked
now the thing is the shape is not perfect
and after adding the ::after for the border, its the same as it was before:
tried changing the original svg same the clipping svg, and it got me this:
is there any way just to clip these remainig edges?
it will work for me
Are you sure that your math is correct? Maybe there is a rounding problem. If the numbers matched correctly, this shouldn't happen.
yeah it should be right
yeah tried 2 time, same result
I went back up and looked at your earlier comment when you presented this code. You have two different paths. One for the clipping and one for the border. You have to use the same path except for the removal of the cutout code in the clip path. Are you sure that your two paths are the same?
They actually look totally different. You would scale the border slightly, but that should be done with an SVG scale to guarantee that they match.
okay so this is the clip path:
and this is the border image svg:
yep their paths are different, but when i try to make both's path same the border image disappears
You have to scale the SVG slightly smaller.
for the clipped one or the image?
The border has to be scaled slightly smaller to stay within the boundaries of the clipping. But scale it using SVG scale code.
You have "scale(0.100000,-0.100000)", so it would be something like "scale(0.096,-0.096)" or some other number like that. I don't know the actual number that would work.
okay let me play with it, this caused chaos btw scale(0.096,-0.096)
What kind of chaos?
It looks like you might need to fix some z-indexes.
how can i add the clipped path path to the image path?
What??? I am not sure what you are asking.
this path
add to this svg path
Add or substitute?
more of replace
They use the same language. Just replace the d value in the SVG path.
yeah but then the image shrinking like this:
like this
That's because you still have the scale code. It shouldn't be 0.1 anymore or 0.096. That was based on the old coordinates before you divided everything by 10.
The new scale factor would be something like 0.96 instead of 0.096.
I forgot that the code for the hole was removed. The SVG still needs a hole.
what does that mean?
oo yeah u said earlier
The clip-path had a hole that had to be removed. But the border needs a hole.
how to do that?
You already removed the hole. What you need is to restore it in the SVG. You had an earlier version that had the hole. Before I asked you to remove everything starting with the second M.
u mean add the m back?
Yes, but only for the border. Do not add it back to the clip path.
That doesn't look like you restored the hole. If it had the hole, then the bottom right would be much thinner.
this is the update code:
added m here
m119.7
Something is wrong with some of the numbers. I did a copy and paste of this code and the image has a very thick right side.
what can be the solution?
any short way to just hide the visible spots in just like it has here?
Whatever math you did wasn't right. This is the image that your SVG produces.
cause this is quite complex
can you help me fix that?
You said you would write a program to do the math for you. Show me the code for that.
let me check if that window is still open or not
nah, closed that chrome window
wait let me write it again
const somefn = () => {
const originalPath = "M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z";
const pathCommands = originalPath.split(/[A-Za-z]/).filter(Boolean);
const dividedPathCommands = pathCommands.map(command => {
const values = command.split(/\s+/).filter(Boolean);
return values.map(value => parseFloat(value) / 10).join(' ');
});
const updatedPath =
M${dividedPathCommands.join(' ')};
console.log(updatedPath);
}An SVG path doesn't only have numbers. There are some important letters like "l","c",and"z", which are lost in your conversion. The initial string split is causing them to be lost.
man this is taking a lot of time, also not sure if it will work or not, its already 3 30 am here, but really apprentice your help, really thank, will try tomorrow to just hide the visible portions
if there any way to do that please do let me know
bye gn
I noticed that the SVG has a negative scale on the y axis. This makes it upside down, so you will need to fix that via a CSS rotation on the X axis. The clip path doesn't include the SVG scaling code, so it isn't upside down. This is a major source of the mismatch between the shapes.
how can i do that?
also gm
Apply this to the CSS of the border image.
But you will also need to translate on the Y axis. There are some complications with the SVG file that won't flip neatly on its center. It will end up in a lower position than before the flip.
I just realized an easier way. Change the scale to both positive numbers and remove the translate in the SVG code. No CSS rotation or translation needed if you do this.
I got it working with the following transform in the SVG:
No flipping in the CSS required and I deleted the translate from the SVG code.
Note that the scale is substantially less than my initial estimate of 0.96, because the viewbox of the SVG is smaller than the actual image coordinates. The real dimensions of the SVG are 571x1731, but the viewbox is set to 428x1298, and I had set the dimensions of the div to match the viewbox.
wait ill try it sometime and will let u know