html - css+html 中带边框的三 Angular 形侧边标签

Question

我需要这样的东西 triangle side navigation tabs ，我试着这样做，使用 :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;    
}

但我有类似 this 的东西

我需要带边框的三 Angular 形边为 1 px，感谢您的帮助。 +1 如果你包含一个 JSFiddle。

Answer 1

• 使用 ::before 伪元素创建两个三 Angular 形，使用颜色较深的边框叠加在一起。
• 接下来，使用与您的元素颜色相同的::after 伪元素覆盖不需要的部分。这可以使用与 ::before 元素相同的规则来完成，将 1px 定位到左侧，创建一个 1px 宽箭头
• 最后，对于箭头的尖端，将 1px box-shadow 添加到两个具有相同颜色的伪元素的右边缘。注意:如果希望箭头更宽，阴影也要相应调整。
• 请记住排除 :first-of-type 以避免在第一个元素之前出现箭头。

代码:

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;
}

fiddle :https://jsfiddle.net/ilpo/r5enysmf/