Html 自定义形状上的边框

我正在尝试设置一些不规则形状（箭头）的边框颜色。问题是，要实现这些形状，我必须已经操纵边界，所以我不能只做

边界颜色：红色

我想设置每个形状2px的边框颜色

HTML:

矩形Css解决方案
下面是一个不使用trinalges，而是使用旋转矩形的示例

解释：

首先，在前面和后面创建一个旋转的矩形。

为前矩形指定与背景相同的颜色。

After元素获得与箭头相同的颜色。
然后，我们可以将边框应用于矩形，以提供具有边框的元素的完美幻觉


正文{
背景色：#555；
}
.菜单{
显示：内联块；
保证金：0；
填充：0；
}
.菜单.箭头{
位置：相对位置；
显示：内联块；
列表样式：无；
字号：2em；
宽度：150px；
高度：70像素；
背景色：白色；
右边距：90像素；
边框顶部：2件纯红；
底部边框：2倍纯红；
}
.箭头：第一种类型{
左边框：2倍纯红；
}
.arrow：：之后{
位置：绝对位置；
顶部：9px；
右：-25px；
内容：“；
高度：50px；
宽度：50px；
背景色：白色；
变换：旋转（45度）；
右边框：2倍纯红；
边框顶部：2件纯红；
}
.阿罗：以前{
内容：“；
位置：绝对位置；
顶部：9px；
左：-25px；
高度：50px；
宽度：50px；
背景颜色：#555；/*需要与车身背景颜色匹配*/
变换：旋转（45度）；
右边框：2倍纯红；
边框顶部：2件纯红；
}
.arrow:类型的第一个：：before{
内容：无；
}
.箭头跨度{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

文本

文本

文本

相关线程-（我不认为这是重复的）。
<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>

.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;
}