Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

css - Clip-path on Chrome leaves a strange line on the edge

I use clip-path to create the particular shape of the blue search button.

From Chrome you see a strange line at the cutout edge, while from Firefox everything is OK.

I am not the first to point this out, but I have not found a solution.

Chrome

enter image description here

Firefox

enter image description here

The clip-path is:

clip-path: polygon(0 0, 0 100%, 15px 50%);

What mystery is this? I also found a similar issue:

CSS - Strange border appearing on Chrome mobile with clip-path

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

I had a similar issue where the right edge of a clip path was sitting just inside of 100%. I was able to fix this by setting the right edge x-coordinate values to 101% and adding overflow: hidden; to the parent element.

clip-path: polygon(0 0, 101% 0, 101% 80%, 0 100%);

I imagine you could do the same on the left side by inputting negative values?

Image before fix

Image after fix


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...