Add border to CSS Clip path-CodePudding

I create this div <div ></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

CodePudding user response：

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 >
        <div ></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