css+中带边框的三角形边制表符；html

我需要这样的东西 ，我尝试这样做，使用：after

.tabs input + label:after{
content:"";
float:left;
position:absolute;
top:0;
right:-12px;
width:0;
height:0;
border-top: 15px solid black;
border-left: 11px solid transparent;
border-bottom: 16px solid black;    
}

但我有点像

我需要1像素的三角形边和边框，谢谢你的帮助。 +1如果您包括一个JSFIDLE。

• 使用

  ：：在

  伪元素之前，使用颜色较深的边框创建两个位于另一个之上的小饰物
• 接下来，使用与元素颜色相同的

  ：：after

  伪元素覆盖不必要的部分。这可以使用与

  相同的规则来完成：在
  元素之前，将
  1px
  定位在左侧，以创建
  1px
  宽箭头

• 最后，对于箭头的尖端，在具有相同颜色的两个伪元素的右边缘添加一个

  1px

  框阴影。注意：如果希望箭头更宽，则应相应调整阴影

• 请记住排除类型的

  ：first，以避免在第一个元素之前有箭头

代码：

小提琴：

li:not(:first-of-type)::before, li:not(:first-of-type)::after{
  content:'';
  display: block;
  position: absolute;
  top: 0;
  left: -10px;
  width:0;
  height:0;
  border-style: solid;
  border-width: 15px 0 15px 10px;
  border-color: blue transparent;
  box-shadow: 1px 0 0 blue;
}
li:not(:first-of-type)::after{
  left: -9px;
  border-color: lightblue transparent;
  box-shadow: 1px 0 0 lightblue;
}