html - 当有伪元素覆盖或隐藏元素的一部分时，在元素周围创建边框效果

Question

我有一个带 Angular 边 Angular 标签，其 Angular 是使用 :after 和 :before 创建的。我想在标签周围加上边框。显然，如果我只是为 li 执行 border: 1px solid ;，它将在选项卡周围创建一个框，而不是在形状周围。你将如何完成它？这是我正在使用的。

*,
*:before,
*:after{
  box-sizing: border-box;
}
ul{
  margin-bottom: 0;
}
li{
  display: inline-block;
  background: lightgreen;
  padding: .4em .9em;
  position: relative;
}
li:before, li:after{
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  /*left: 0;*/
  content: "";
}
li:before{
  left: 0;
  border-top: 5px solid white;
  border-left: 5px solid white;
  border-bottom: 5px solid transparent;
  border-right: 5px solid transparent;
}
li:after{
  right: 0;
  border-top: 10px solid white;
  border-right: 10px solid white;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}
li:first-of-type{
  padding-top: .5em;
}

.area{
  width: 300px;
  height: 100px;
  /*margin: 0;*/
  padding: 0;
  border:1px solid green;
}

<ul>
  <li>tab1</li> <li>tab two</li>
</ul>
<div class="area">DIVS</div>

Answer 1

我可能会使用正方形而不是三 Angular 形并旋转它们:

li{
  display: inline-block;
  background: lightgreen;
  padding: .4em .9em;
  position: relative;
  border: 1px solid black;
}
li:before, li:after{
  content: "";
  display: block;
  position: absolute;
  font-size:0;
  background: white;
  border-bottom: 1px solid black;
}
li:before{
  width: 10px;
  height: 10px;
  top: -5px;
  left: -5px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
li:after{
  width: 20px;
  height: 20px;
  top: -10px;
  right: -10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

JS斌here .