Question

我有一个有角度的角落标签，其角度是使用:after和:before创建的。我想在标签周围找到边框。显然，如果我只为border: 1px solid ;做li，它会在标签周围创建一个框，而不是在形状周围。你怎么做到的？这是我正在做的事情。

＆＃13;

*,
*: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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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 Bin here。

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

1 个答案: