Border On Custom Shape

Fiddle here I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I c

Solution 1:

CSS solution with rectangles

Here is an example that does not use triangles, but instead uses rotated rectangle.

Explanation: First the before and after create a rotated rectangle. Give the before rectangle the same color as the background. After element gets the same color as the arrow. Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.

body {
  background-color: #555;
}
.menu {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.menu.arrow {
  position: relative;
  display: inline-block;
  list-style: none;
  font-size: 2em;
  width: 150px;
  height: 70px;
  background-color: white;
  margin-right: 90px;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}
.arrow:first-of-type {
  border-left: 2px solid red;
}
.arrow::after {
  position: absolute;
  top: 9px;
  right: -25px;
  content: "";
  height: 50px;
  width: 50px;
  background-color: white;
  transform: rotate(45deg);
  border-right: 2px solid red;
  border-top: 2px solid red;
}
.arrow::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -25px;
  height: 50px;
  width: 50px;
  background-color: #555; /*Needs to match body backgrond-color*/transform: rotate(45deg);
  border-right: 2px solid red;
  border-top: 2px solid red;
}
.arrow:first-of-type::before {
  content: none;
  
}
.arrowspan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<ulclass="menu"><liclass="arrow"><span>Text</span></li><liclass="arrow"><span>Text</span></li><liclass="arrow"><span>Text</span></li></ul>