How to create arrow with border with CSS

How to make an arrow like in the picture below? Example

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

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;
}

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

How to create arrow with border with CSS

Related

Recent Posts