Add border to CSS Clip path

Question

I create this div <div class="arrow"></div> and then drown arrow with clip path using the below CSS code

  .arrow {
        width: 40px;
        height: 121px;
        background: #fff;
        -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
        position: absolute;
        right: -41px;
        z-index: 1;
        top: -1px;
    }

but now I face a problem , I didn't need this clip path to fill with background color I just want it to have a border I try to give it border:1px solid #000 but it doesn't work

You can't. The whole point of a clip path is that it hides everything outside of itself including borders — Paulie_D
– Paulie_D, Commented Jul 19, 2022 at 13:08
i see a lot of online examples of add border I just cant apply on my code codepen.io/bennettfeely/pen/azJWWX — Aly_Elgahy
– Aly_Elgahy, Commented Jul 19, 2022 at 13:14

Darlo · Accepted Answer · 2022-07-19 13:50:08Z

Looking at the codepen example you gave, they have two clip-paths on two divs. This gives the impression of having a border. Modifying it with your path gives you this:

    .arrowLine {
        position: absolute;
        width: 40px;
        height: 151px;
        background: rebeccapurple;
        top:-1px;
        right:-41px;
        z-index:1;
        -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    }
    
    .arrow {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        background: white;
        -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    }

    <div class="arrowLine">
        <div class="arrow"></div>
    </div>

The top/left/right/bottom is where the width of the 'border' is. (You could also use inset:5px instead of writing all of them)

Here's a codepen: https://codepen.io/darlo/pen/RwMpyeV

Collectives™ on Stack Overflow

Add border to CSS Clip path

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related