自定义形状的边框

Question

Fiddle here

我正在尝试设置一些不规则形状的边框颜色（箭头ish）。问题是，为了实现这些形状，我已经不得不操纵边框，所以我不能只做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 解决方案

这是一个不使用三角形，而是使用旋转矩形的示例。

说明：
首先创建一个旋转的矩形之前和之后。
为前面的矩形赋予与背景相同的颜色。
元素后的颜色与箭头相同。 然后我们可以将边框应用到矩形，以提供具有边框的元素的完美错觉。

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>