带有虚线边框的Css箭头

Question

我正在努力让我的:before箭头与我的div很好地配合，但我找不到给出箭头的方法

• background-color: transparent
• dashed border。

CSS：

  position: absolute;
  top: 30px;
  right: 8px;
  display: inline-block;
  border-top: 12px dashed transparent;
  border-left: 12px dashed #b3b3b3;
  border-bottom: 12px dashed transparent;
  border-left-color: #b3b3b3;
  content: '';

JS FIDDLE

Answer 1

您应该使用相同的border-width并旋转伪元素。 添加背景以隐藏其所在的框边框。的 DEMO

CSS可以成为伪：

ul.timeline li.item-timeline:nth-child(even):before {
    position: absolute;
    top: 37px;
    right: 15px;
    display: inline-block;
    border-top: 1px dashed #b3b3b3;
    border-right: 1px dashed #b3b3b3;
    width:10px;
    height:10px;
    transform:rotate(45deg);
    background:white;
    z-index:1;
    content:'';
}

在需要的地方使用前缀。

---

额外信息，

如果FF中的多边形点缀半径边框困扰您，您可以使用轮廓偏移来切割边框。 DEMO, for FF only

@-moz-document url-prefix() {
    /* a stupid way to fix here the border radius effect when dotted or dashed*/
    div.inner-content {
        outline:white double 4px;
        outline-offset:-5px;
    }
}

Answer 2

您可以从此代码http://codepen.io/romanstrobel/pen/EgCHi中了解相关信息。你不能使用：之前，因为z索引不同

HTML

<div class="wrap">
  <div class="arrow"></div>
  <div class="arrow-cover"></div>
  <div class="box"></div>
</div>

CSS

.wrap {
  margin: 100px auto;
  width: 300px;  
  height: 150px;    
  position: relative;
}
.arrow {
  width: 50px;
  height: 50px;
  border: 3px dotted gray;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: -25px;
  z-index: 10;
  border-radius: 10px;  
}
.arrow-cover {
  top: 50%;
  margin-top: -25px;
  left: -21px;
  width: 50px;
  height: 50px;
  border: 3px solid transparent;
  position: absolute;
  background: white;
  z-index: 30;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 10px;
}
.box {
  width: 300px;  
  height: 150px;    
  background: white;
  z-index: 20;
  position: relative;
  border: 3px dotted gray;
  background: white;
  border-radius: 10px;
}