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/

所以看起来应该是这样的：

image preview

Answer 1

您可以使用pseudo-element之类的:before。并使它比div略大。也相应地定位它。见下文

＆＃13;

.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;
  
  
}

＆＃13;

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

＆＃13;

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

1 个答案: