How to draw border arround arrow?

Question

I want to draw border around entire arrow and the problem is on the right side cause it draws around square.

The reason is the right triangle is transparent and it sees it like that. Without that arrows won't be seen if they are colored the same.

Any ideas how to do that?

Here is jsfiddle

HTML

.firstArrow {
  position: relative;
  background: red;
  text-align: center;
  margin-right: 10px;
  margin-left: 0px;
  height: 50px;
  width: 330px;
  float: left;
  z-index: 3;
  padding-left: 50px;
  padding-top: 7px;
}

.firstArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient(to right top,red 50%,transparent 50%);
}

.firstArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient(to right bottom,red 50%,transparent 50%);
}

.secondArrow {
  position: relative;
  background: blue;
  margin-right: 10px;
  padding-left: 50px;
  padding-top: 7px;
  left: -20px;
  float: left;
  z-index: 2;
  height: 50px;
  width: 330px;

}
.secondArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;   
  text-align: center;
  top: 0;
  background: linear-gradient(to right top,blue 50%,transparent 50%);
}

.secondArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient(to right bottom,blue 50%,transparent 50%);
}
.thirdArrow {
  position: relative;
  background: green;
  text-align: center;
  padding-top: 7px;
  height: 50px;
  width: 330px;
  left: -40px;
  float: left;
  z-index: 1;
}

.thirdArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient( to right bottom, green 50%,transparent 50%);
}
.thirdArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient( to right top, green 50%, transparent 50%);
}

<div class="firstArrow"> 1 </div>
<div class="secondArrow"> 2 </div>
<div class="thirdArrow"> 3 </div>

Answer 1

You can do the shape differently using skew transformation:

.arrow {
  position: relative;
  text-align: center;
  padding: 20px 0;
  width: 100px;
  float: left;
  color: #fff;
  z-index: 0;
}

.arrow:before,
.arrow:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  z-index: -1;
  top: 0;
  height: 50%;
  left: -3px;
  right: 0;
  transform: skewX(45deg);
  transform-origin: bottom;
  background: var(--c, red);
  border: 3px solid #000;
  border-bottom: 0;
}

.arrow:after {
  transform: scaleY(-1) skewX(45deg);
}

.arrow:first-child {
  overflow: hidden;
  border-left: 3px solid #000;
}

<div class="arrow"> 1 </div>
<div class="arrow" style="--c:blue;"> 2 </div>
<div class="arrow" style="--c:green;"> 3 </div>

Answer 2

Please check the below sample. Hope it will meet your requirements.The right side arrow head and its border are created using pseudo elements ::before and ::after

.firstArrow {
    position: relative;
    background: #eee;
    height: 50px;
    width: 150px;
    float: left;
    text-align: center;
    line-height: 50px;
    border: solid 3px #999;
}
.firstArrow:after,
.firstArrow:before {
    content: '';
    position: absolute;

}
.firstArrow:before {
    top: 0;
    right: -50px;
    z-index: 2;
    border: 25px solid;
    border-color: transparent transparent transparent #eee;
}
.firstArrow:after{
    top: -3px;
    right: -58px;
    z-index: 1;
    border: 28px solid;
    border-color: transparent transparent transparent #999;
}

<div class="firstArrow">shape 1</div><div class="firstArrow">shape 2</div><div class="firstArrow">shape 3</div>

Answer 3

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  width: 30%;
}

.firstArrow {
  background: red;
}

.secondArrow {
  background: blue;
}

.thirdArrow {
  background: green;
}

.firstArrow, .secondArrow, .thirdArrow {
  margin-bottom: 20px;
  padding: 20px;
  text-align: center;
}

.firstArrow::before, .secondArrow::before, .thirdArrow::before {
    content: '';
    position: absolute;
    width: 41px;
    height: 41px;
    background: red;
    right: -21px;
    top: 9px;
    transform: rotate(45deg);
    box-sizing: border-box;
}

.secondArrow::before {
  background: blue;
}

.thirdArrow::before {
  background: green;
}

.firstArrow::after, .secondArrow::after, .thirdArrow::after {
  content: '';
  position: absolute;
  width: 49px;
  height: 49px;
  right: -26px;
  border: 1px solid;
  transform: rotate(45deg);
  box-sizing: border-box;
  top: 5px;
}

.firstArrow::after {
  border-color: red;
}

.secondArrow::after {
  border-color: blue;
}

.thirdArrow::after {
  border-color: green;
}

.blue-border::before, .red-border::before, .green-border::before {
    content: '';
    position: absolute;
    border: 1px solid red;
    transform: rotate(0);
    width: 100%;
    height: 68px;
    left: 0;
    top: -5px;
    background: transparent;
}

.blue-border::before {
  border: 1px solid blue;
}

.green-border::before {
  border: 1px solid green;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="wrapper">
     <div class="firstArrow red-border"> 1 </div>
   </div>
  
  <div class="wrapper">
     <div class="secondArrow blue-border"> 2 </div>
   </div>
  
  <div class="wrapper">
     <div class="thirdArrow green-border"> 3 </div>
   </div>
</body>
</html>

Check if you wanted something like this!