-4

How to draw dashed line using html and css as below? Not the dotted line. ------> . Arrow should be centered of the dashes.

refer the attached iamge.

I have tried this:

.line {
  width: 20%;
  margin: 5px 0;
  height: 2px;
  background: repeating-linear-gradient(to right, red 0, red 5px, transparent 5px, transparent 7px) center/*5px red then 2px transparent -> repeat this!*/
}
<div class="line"></div> <i class="fa ui-icon-keyboard-arrow-right ui-icon-button;" style="font-size:24px; color:black"></i>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
SSSS
  • 205
  • 2
  • 8
  • 18
  • what have you tried? please show your effort or your attempt... – DaFois Sep 07 '18 at 09:56
  • css - .line { width: 20%; margin:5px 0; height:2px; background: repeating-linear-gradient(to right,red 0,red 5px,transparent 5px,transparent 7px) center /*5px red then 2px transparent -> repeat this!*/ }
    – SSSS Sep 07 '18 at 09:58
  • Possible duplicate of [create an arrow using css](https://stackoverflow.com/questions/40468111/create-an-arrow-using-css) – DaFois Sep 07 '18 at 09:58
  • edit the post and put that code inside it – DaFois Sep 07 '18 at 09:59
  • 1
    You're half way there, just use a pseud element hide two of it's borders and rotate it. – Rainbow Sep 07 '18 at 10:07
  • 1
    you can simply ask me in the other question (https://stackoverflow.com/questions/52219136/how-to-draw-dashed-line-using-html-and-css/52219195#52219195) .. I have explained what you need to do .. you need to control height and background-position – Temani Afif Sep 07 '18 at 10:13

1 Answers1

4

refer following code and change styling as per your requirement.

.myarrow{
  position:absolute;
  top:0;
  bottom:0;
  transform: rotate(90deg);
}
.line {
  border-right: 0.2rem dashed red;
  display:inline-block;
  height:5rem;
}
.arrow{
position:absolute;
  top:-0.3rem;
  bottom:0;
  height:1rem;
  border-right: 0.2rem solid red;
  display: inline-block;
}
.right{
  left:0.3rem;
  transform: rotate(-45deg);
}
.left{
  right:0.3rem;
  transform: rotate(45deg);
}
<div class="myarrow">
  <span class="arrow left"></span>
  <span class="line"></span>
  <span class="arrow right"></span>
</div>
yogesh vaidya
  • 117
  • 9