带有虚线边框的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,仅适用于FF

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