Is it possible, via css, html or jquery to create such a chart?
Actually, the problem is to make the arrows. If anyone has ever worked on something like that to give birth, I thank you.
I've created some styles with 5 arrows in different positions in CSS using ::before
and ::after
, which you can use as a base and create others based on the templates and adjust as you see fit for your project.
Here is the sample 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>