已使用 CSS 边框创建 div 时如何创建额外边框

【问题标题】：how to create an extra border when div is created with css border already已使用 CSS 边框创建 div 时如何创建额外边框
【发布时间】：2018-03-16 20:43:15
【问题描述】：

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

.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 solid black

我该怎么做？

小提琴是她的：https://jsfiddle.net/wqehc9vv/4/

所以它应该是这样的：

image preview

【问题讨论】：

标签： css border

【解决方案1】：

您可以为此使用pseudo-element，例如:before。并使其比 div 略大。也相应地定位它。见下文

.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;
}
.blue-arrow-right:before {
  content:"";
  position:absolute;
  left:-30px;
  top:-32px;
  border-top: 32px solid transparent;
  border-bottom: 32px solid transparent;  
  border-left: 32px solid black;
  z-index:-1;
  
  
}

<div class="blue-arrow-right">

</div>

【讨论】：

很棒的解决方案！谢谢
@PietMaessen 很高兴我能提供帮助。请不要忘记将我的回答评为已接受（绿色勾号）。谢谢！