I want to resolve an issue with my corner. As depicted in the image, the corner is cut perfectly; however, this is not the case when I zoom in or out on the page.

As you can observe, borders have begun to appear on all sides of the element, which somewhat disrupts the entire layout.

tried a lot of variants, copied code from codepen, other Stackoverflow issues, but couldn’t get it to work.
here’s the code, HTML :

    <div class="btn btn-primary cut-corner position-relative">Edit</div>

scss:

.cut-corner::after {
    content: '';
    width: 50%;
    height: 50%;
    position: absolute;
    bottom: -2px;
    right: -2px;
    border-top: 25px solid transparent;
    border-right: 18px solid $color_1;
    pointer-events: none;
}

.cut-corner::before {
    content: '';
    width: 2px;
    height: 84%;
    position: absolute;
    bottom: -4px;
    right: 6px;
    background-color: #5bd9ab;
    transform: rotate(33deg);
    z-index: 3;
    pointer-events: none;
}