html - Css Arrow with dashed border -

html - Css Arrow with dashed border -

i'm trying :before arrow work nicely div, can't find way give arrow

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

you should utilize same border-width , rotate pseudo element. add together background hide box border stands. demo

css can become pseudo :

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:''; }

use prefix wherever needed.

extra infos,

if buggy dotted radius border in ff bothers you, can play outline-offset cutting borders.demo, ff only

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

html css css3