Graphic in css or jquery

Question

It is possible, via css, html or jquery to create a chart like this?

Actually, the problem is making the arrows. If anyone has ever worked on something like this to shed light, I thank you.

Answer 1

I created some styles with 5 arrows in different CSS positions using ::before and ::after, that you can use as a base and create the others based on the models and adjust the way you think best for your project.

Follow the example code:

#div1{
   width: 100px;
   background: #fff;
   padding: 30px;
   border: 1px solid #ddd;
   border-radius: 10px;
   position: relative;
   
   /*apenas para posicionar*/
   margin: 100px;
}

.seta{
   position: absolute;
}

.meioH{
   left: 50%;
}

.meioV{
   top: 50%;
}

.setaup, .setaup-right{
   top: 0;
}

.setadown{
   bottom: 0;
}

.setaright, .setaup-right{
   right: 0;
}

.setaleft{
   left: 0;
}

/*estilos comuns before*/
.setaup::before,
.setadown::before,
.setaright::before,
.setaleft::before,
.setaup-right::before{
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   border-style: solid;
}

/*estilos comuns after*/
.setaup::after,
.setadown::after,
.setaright::after,
.setaleft::after,
.setaup-right::after{
   content: '';
   position: absolute;
   background: #000;
}

/*before: setas; after: barra*/

.setaup::before{
   border-width: 0 5px 10px 5px;
   border-color: transparent transparent #000000 transparent;
   bottom: 60px;
   margin-left: -5px;
}

.setaup::after{
   width: 2px;
   height: 60px;
   top: -60px;
   margin-left: -1px;
}

.setadown::before{
   border-width: 10px 5px 0 5px;
   border-color: #000000 transparent transparent transparent;
   top: 60px;
   margin-left: -5px;
}

.setadown::after{
   width: 2px;
   height: 60px;
   bottom: -60px;
   margin-left: -1px;
}

.setaright::before{
   border-width: 5px 0 5px 10px;
   border-color: transparent transparent transparent #000000;
   left: 60px;
   margin-top: -5px;
}

.setaright::after{
   width: 60px;
   height: 2px;
   right: -60px;
   margin-top: -1px;
}

.setaleft::before{
   border-width: 5px 10px 5px 0;
   border-color: transparent #000000 transparent transparent;
   right: 60px;
   margin-top: -5px;
}

.setaleft::after{
   width: 60px;
   height: 2px;
   left: -60px;
   margin-top: -1px;
}

.setaup-right::before{
   border-width: 0 10px 10px 0;
   border-color: transparent #000000 transparent transparent;
   left: 35px;
   top: -39px;
   margin-top: -5px;
}

.setaup-right::after{
   width: 60px;
   height: 2px;
   right: -60px;
   top: 2px;
   left: -2px;
   transform: rotate(-45deg);
   transform-origin: left;
}

<div id="div1">
   texto
   <span class="seta setaup meioH"></span>
   <span class="seta setadown meioH"></span>
   <span class="seta setaright meioV"></span>
   <span class="seta setaleft meioV"></span>

   <span class="seta setaup-right"></span>
</div>