fliebel

by Fleuv

HTML

<div class="button">
Button
</div>
<div class="button left">
Button
</div>

CSS

:root {
  --arrow-size: 50px;
  --border-width: 50px;
  --border-radius: 10px;
  --border-color: red;
}

.button {
  width: 150px;
  border: var(--border-width) solid var(--border-color);
  display: inline-block;
  line-height: 500px;
  text-align: center;
  border-radius: var(--border-radius);
  position: relative;
  border-right-width: 0;
  padding-right: var(--border-width);
  margin-right: var(--arrow-size);
  background: 
    linear-gradient(
      -45deg,
      var(--border-color) 0,
      var(--border-color) calc((100% - var(--arrow-size))/2),
      transparent calc((100% - var(--arrow-size))/2),
      transparent 100%
    ) 100% 0 / var(--border-width) 100% no-repeat,
    linear-gradient(
      45deg,
      transparent 0,
      transparent calc((100% + var(--arrow-size))/2),
      var(--border-color) calc((100% + var(--arrow-size))/2),
      var(--border-color) 100%
    ) 100% 0 / var(--border-width) 100% no-repeat;
}

.button:after {
  content: '';
  display: inline-block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-color: var(--border-color) var(--border-color) transparent transparent;
  border-style: solid;
  border-width: var(--border-width);
  border-radius: var(--border-radius);
  position: absolute;
  pointer-events: none;
  top: calc(50% - ((var(--arrow-size) / 2) + var(--border-width)));
  right: calc((var(--arrow-size) / 2) * -1);
  transform: rotate(45deg);
}

.left {
  transform: scaleX(-1);
}