How to create arrow with border with CSS

Question

How to make an arrow like in the picture below?

Have a search around and try some code. If you get stuck see https://stackoverflow.com/help/minimal-reproducible-example to help you put the code into your question so that we can help you. There are several things to try, including pseudo elements or SVG. — A Haworth, Jan 21 '22 at 06:16
This resource is helpful https://www.sliderrevolution.com/resources/css-arrow/ — najmieh sadat safarabadi, Jan 21 '22 at 06:23
Did you try to use two polygons, first normal, second larger and place it under first? Second polygon would be as border. — Flagmans, Jan 21 '22 at 06:51
Does this answer your question? [Cutting Out a Shape using HTML and CSS](https://stackoverflow.com/questions/58921700/cutting-out-a-shape-using-html-and-css) — cloned, Jan 21 '22 at 07:41

score 3 · Accepted Answer · edited Jan 21 '22 at 07:40

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

1 Answers1