How to create arrow with border with CSS

Question

How to make an arrow like in the picture below?

Answer 1

I've created a codepen using clippath, let me know if that works.

https://codepen.io/_makki/pen/BawgmVJ

<div>
    <span>Some Text</span>
</div>

div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 150px;
    position: relative;
    background: black;
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 15% 50%, 0% 0%);
}

div:before {
    content: "";
    background: white;
    height: calc(100% - 2px);
    width: calc(100% - 3px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 15% 50%, 0% 0%);
}

div span {
    z-index: 2;
    position: relative;
}