Add a border to the shape in CSS [duplicate] - html

Question

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 can't just do border-color: red;
I want to set the color of the borders of each shape 2px
HTML:
<div class="menuTop">
<ul>
<li><div>HOME</div></li>
<li><div>Location</div></li>
<li><div><span>Sub-Location<span></div></li>
</ul>
</div>
CSS:
.menuTop {
background-color: lightgreen;
height: 80px;
margin: auto;
position: absolute;
top: 0;
width: 100%
}
.menuTop ul {
list-style-type: none;
}
.menuTop li {
font-size: 0;
display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
content:'';
display: inline-block;
width:0;
height:0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
vertical-align: middle;
}
.menuTop li:before {
border-top-color: #fff;
border-bottom-color: #fff;
border-right-color: #fff;
}
.menuTop li:first-of-type:before {
border:0;
}
.menuTop li:first-of-type {
border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
border-left-color: #fff;
}
.menuTop li:last-of-type:after {
border:0;
}
.menuTop li:last-of-type {
border-right: 2px solid #F37C31;
border-bottom: 2px solid #F37C31;
border-top: 2px solid #F37C31;
}
.menuTop li div {
width: 185px;
height:40px;
display: inline-block;
background: #fff;
text-align:center;
position: relative;
line-height:40px;
vertical-align: middle;
}
.menuTop li div a, span {
text-decoration: none;
color: #bbb;
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size: 13px;
}
.menuTop li div a:hover {
text-decoration: underline;
color: #000;
}
.menuTop li div span {
color: #000;
font-weight: bold;
}

Answer 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;
}
.arrow span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="menu">
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
</ul>