Border на пользовательской форме

Question

Fiddle here

Я пытаюсь установить цвет границы некоторых неправильных форм (стрелка МОГ) я сделал. Проблема заключается в том, что для достижения этих форм мне пришлось манипулировать границы уже, так что я не могу просто сделать border-color: red;

Я хочу, чтобы установить цвет границы каждой формы 2px

HTML:

<div class="menuTop"> 
<ul> 
    <li><div><a href="#">HOME</a></div></li> 
    <li><div><a href="#">Location</a></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 с прямоугольниками

Вот пример, который не использует тринальды, но вместо этого использует повернутый rectangel.

Объяснение:
Сначала перед и после создания вращающегося прямоугольника.
Дайте перед прямоугольником тот же цвет, что и фон.
После того, как элемент получает тот же цвет, что и стрелка. Затем мы можем применить границы к прямоугольникам, чтобы создать идеальную иллюзию элементов, имеющих границу.

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>