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

Question

我创建了一个看起来像带有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/

所以它应该看起来像这样：

图像预览

Answer 1

您可以使用

像:before这样的pseudo-element。并使其比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>