Thursday, March 16, 2023
The Great Tit
Updated: 16. 3. 2023, Added: 16. 3. 2023

FIX: Clip-path leaves a strange line on the element

When you use the clip-path on some element - for example to cut the background to some form. I use it on my website, to cut the slider to ellipse. Take a look how it lefts the colored line on the path:

Clip path strange line

How to fix this in CSS stylesheet? This is the CSS of mine <div>:

.page-slider_wrapper {
    min-height: 420px;
    background-size: auto, cover;
    background-repeat: no-repeat;
    background-position: 0px 50%;
    height: 100%;
    justify-content: end;
    display: flex;
    clip-path: ellipse(130% 100% at 50% 0%);
    justify-content: end;
    align-items: center;
}

What fix this, is to add the transform to the div with clip-path.

 transform: translateZ(0)

After that, it's completely fine:

clip path line fixed with CSS
Did I help you? Support me on Patreon!
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram