带有css + html边框的三角形侧边标签

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

之类的东西

我需要带有1 px边框的三角形边，谢谢你的帮助。 如果包含JSFiddle，则为+1。

Answer 1

• 使用router.route('/getOrders') .get(function(req, res){ res.locals.session = req.session; db.getOrders(req.session.email, function (err, orderList) { if (err) { console.log(err); 伪元素使用颜色较深的边框创建两个位于另一个顶部的tringle。
• 接下来，使用与您的元素颜色相同的::before伪元素覆盖不必要的部分。这可以使用与::after元素相同的规则来完成，位于左侧::before以下，以创建1px宽箭头
• 最后，对于箭头的提示，将1px 1px添加到具有相同颜色的两个伪元素的右边缘。注意：如果您希望箭头更宽，则应相应调整阴影。
• 请务必排除box-shadow以避免在第一个元素之前加上箭头。

代码：

:first-of-type

小提琴：https://jsfiddle.net/ilpo/r5enysmf/