Does anyone know how to draw these types of arrows with CSS?

Question

I'm trying to make some arrows like the following arrows

I am using Sass and Bootstrap4 and I want to make them by drawing them with css3

I've tried this, but I don't know how to achieve it:

.line1 p{
 background-color: red;
 width: 80px;
 height: 80px;
 text-align: center;
 align-items: center;
 border-radius: 50%;
 color: #fff;
 font-size: 2rem;
}
.line1 p::before{
 content:'';
 display: block;
 color: blue;
 width: 300px;
 height: 10px;
 position: absolute;
 border: 5px solid red;
 margin: 30px 10px 0;
 z-index: -1;
 border-radius: 0 50px 50px 0;
   background-color: red;
}
.line1 p::after{
 content:'';
 display: block;
 color: blue;
 width: 10px;
 height: 200px;
 position: absolute;
 border: 5px solid red;
 margin-left: 20px;
 z-index: -1;
   background-color: red;
 
}

<div class="col-md-3  align-items-center mr-0">
    <div class="line1  my-auto">
        <p class="d-block my-auto">1</p>
    </div>
 </div>

related: https://stackoverflow.com/a/48606321/8620333 – Temani Afif Nov 18 '19 at 21:52 — Temani Afif, Nov 18 '19 at 21:52

score 1 · Accepted Answer · answered Aug 25 '20 at 21:15

I come from the future and you managed to do it like this:

.line-container{
  
  border-bottom: 5px solid red;
  border-right: 5px dashed red;
  }
 .line-container::before{
    
    content:"";
    // display:block;
    position: absolute;
    height: 20px;
    width:20px;
    border-radius:50%;
    background: red;
    bottom:-7px;
    left:0;
}
.line-container::after{
    content:"2";
    position:absolute;
    width:55px;
    height:55px;
    border-radius:50%;
    background: red;
    bottom:-25px;
    right:-7px;
    font-size:2rem;
    font-weight:700;
    color:#fff;
    text-align:center;
}
  
.line-container p::before{
  content:"➤";
  position:absolute;
  font-size:32px;
  color:red;
  right:2.6px;
  top:-30px;
  transform: rotate(270deg);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<div class="col-8 mt-5">
  <div class="line-container px-md-5 pt-5">
  <p class="mt-5"   >Lorem ipsum dolor sit amet,       consectetur adipisicing elit. Dicta minus  </p>
    
</div>
</div>

You only need to use the 'lines' of the rectangles of the containers, they already exist so you only need to put color

score 0 · Answer 2 · answered Nov 18 '19 at 22:19

I was able to find the initial css for a triangle here. Basically you want to make two borders of a div transparent and give them a certain width so it appears to pinch the div into a triangle. I also added the ball which was pretty straightforward aside from positioning.

You may want to make further adjustments to fit your needs but this should get you started :)

.line1 p{
 background-color: red;
 width: 80px;
 height: 80px;
 text-align: center;
 align-items: center;
 border-radius: 50%;
 color: #fff;
 font-size: 2rem;
}
.line1 p::before{
 content:'';
 display: block;
 color: blue;
 width: 300px;
 height: 10px;
 position: absolute;
 border: 5px solid red;
 margin: 30px 10px 0;
 z-index: -1;
 border-radius: 0 50px 50px 0;
   background-color: red;
}
.line1 p::after{
 content:'';
 display: block;
 color: blue;
 width: 10px;
 height: 200px;
 position: absolute;
 border: 5px solid red;
 margin-left: 20px;
 z-index: -1;
   background-color: red;
 
}

.arrow1{
position: absolute;
transform: rotate(180deg);
    left: 3px;
    top: 225px;
width: 0;
  height: 0;
  border-right: 28px solid transparent;
    border-bottom: 60px solid red;
    border-left: 28px solid transparent;
}
  
  .ball1{
  position: absolute;
  left: 300px;
  top: 15px;
  background-color: red;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  }

<div class="col-md-3  align-items-center mr-0" style="position: relative;">
    <div class="line1  my-auto">
        <p class="d-block my-auto">1</p>
        <div class='arrow1'></div>
        <div class='ball1'></div>
    </div>
 </div>

score 0 · Answer 3 · answered Nov 18 '19 at 22:59

Well, I'll give you a quick PoC you could easily expand on so its use could be defined for the instance with pre-made templates but if you want all other directions and stuff you'll have to do the extra creative work and fill in the blanks on your own but this might help get you started. Cheers!

.magic-arrows {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--arrow-circle-height);
  width: var(--arrow-circle-width);
  background-color: var(--arrow-color);
  border-radius: 50%;
  overflow: visible;
}
.magic-arrows:before, .magic-arrows:after {
  content: '';
  display: block;
  position: absolute;
  color: var(--arrow-color);
  border: var(--arrow-color) var(--arrow-dash-size) dashed;
  overflow: visible;
  z-index: -1;
}
.magic-arrows:before {
  height: 0;
  width: calc( var(--arrow-circle-width) + var(--arrow-width) );
  left: var(--arrow-circle-width);
  top: 50%;
  transform: translateY(-50%);
}
.magic-arrows:after {
  width: 0;
  height: calc( var(--arrow-circle-width) + var(--arrow-width) );
  top: var(--arrow-circle-width);
  left: 50%;
  transform: translateX(-50%);
}
.magic-arrows .arrow-right, .magic-arrows .dot-down {
  position: absolute;
  font-size: var(--arrow-size);
  color: var(--arrow-color);
}
.magic-arrows .arrow-right {
  top: 50%;
  left: calc(var(--arrow-circle-width) + var(--arrow-width) + var(--arrow-size) + 1rem);
  transform: translateY(-55%);
}
.magic-arrows .dot-down {
  position: absolute;
  left: 50%;
  top: calc(var(--arrow-circle-width) + var(--arrow-width) + var(--arrow-size) + 1rem);
  transform: translateX(-55%) rotate(90deg);
}

<div class="magic-arrows" 
     style="--arrow-color: red;
            --arrow-circle-height: 3rem;
            --arrow-circle-width: 3rem;
            --arrow-width: 10rem;
            --arrow-dash-size: 5px;
            --arrow-size: 2rem;">
  <span>3</span>
  
  <div class="arrow-right">➤</div>
  <div class="dot-down">◉</div>
</div>

Does anyone know how to draw these types of arrows with CSS?

3 Answers3