自定义形状的边框

Question

点此查看代码

我想要设置一些不规则图形（类似箭头）的边框颜色。问题在于，我必须对边框进行操作才能获得这些形状，因此我不能只使用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;
}

- Cornwell

---

相关线程- https://dev59.com/EV4c5IYBdhLWcg3wssFs#28196665 （尽管我认为这不是重复的）。 - Harry

Answer 1

使用矩形实现CSS解决方案

解释：
首先，before和after元素创建一个旋转的矩形。
将before元素的颜色设置为背景色相同。
将after元素的颜色设置为箭头的颜色。
然后，我们可以给矩形应用边框，以完美地模拟元素具有边框的效果。

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>

- Persijn