如何在创建 div 且已使用 css 边框时创建额外边框

Question

我创建了一个 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 solid black

我该怎么做？

她的是 fiddle：https://jsfiddle.net/wqehc9vv/4/

所以它应该是这样的：

image preview

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>

如何在创建 div 且已使用 css 边框时创建额外边框

how to create an extra border when div is created with css border already

css

border