当已经使用css边框创建了div时，如何创建额外的边框

我创建了一个div，看起来像一个带有css边框的箭头

.blue-arrow-right {
   width: 0; 
   height: 0;
   position: relative;
   float: left;
   margin-left: 0px;
   margin-top: 5px;

   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;  
   border-left: 30px solid #009de1;
}

现在我想在div的右侧创建一个额外的边框，比如：

1px纯黑

我该怎么做

她的小提琴是：

所以它应该是这样的：

---

您可以使用类似

：before

的

伪元素来实现这一点。并使其略大于div。也相应地对其进行定位。见下文


。右蓝色箭头{
宽度：0；
身高：0；
位置：相对位置；
浮动：左；
左边距：0px；
边缘顶部：5px；
边框顶部：30px实心透明；
边框底部：30px实心透明；
左边框：30px实心#009de1；
}
.蓝色箭头右：之前{
内容：“；
位置：绝对位置；
左：-30px；
顶部：-32px；
边框顶部：32px实心透明；
边框底部：32px实心透明；
左边框：32px纯黑；
z指数：-1；
}
您可以使用类似
:before
的
伪元素来实现此目的。并使其略大于div。也相应地对其进行定位。见下文


。右蓝色箭头{
宽度：0；
身高：0；
位置：相对位置；
浮动：左；
左边距：0px；
边缘顶部：5px；
边框顶部：30px实心透明；
边框底部：30px实心透明；
左边框：30px实心#009de1；
}
.蓝色箭头右：之前{
内容：“；
位置：绝对位置；
左：-30px；
顶部：-32px；
边框顶部：32px实心透明；
边框底部：32px实心透明；
左边框：32px纯黑；
z指数：-1；
}

绝妙的解决方案！感谢you@PietMaessen很高兴我能帮忙。请别忘了给我的答案打分（绿色勾号）。谢谢真棒的解决方案！感谢you@PietMaessen很高兴我能帮忙。请别忘了给我的答案打分（绿色勾号）。谢谢