2

Preciso desenvolver um documento HTML parecido com a imagem abaixo:

inserir a descrição da imagem aqui

Estou com dificuldade em fazer as ligações, olha que está meu projeto.

inserir a descrição da imagem aqui

Preciso que fique mais ou menos desse jeito

inserir a descrição da imagem aqui

Meu html está assim:

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<link href="C:\Users\JeanCarlos\OneDrive\Faculdade\TCC\TCC II\Diagrama de Rede\bootstrap.3.3.5\content\Content\bootstrap.css" rel="stylesheet" />
<link href="C:\Users\JeanCarlos\OneDrive\Faculdade\TCC\TCC II\Diagrama de Rede\bootstrap.3.3.5\content\Content\bootstrap-theme.css" rel="stylesheet" />
<style>

.div1{
position: absolute;
top: 200px;
left: 25px;
}

.div2{
position: absolute;
top: 50px;
left: 225px;
}

.div3{
position: absolute;
top: 400px;
left: 225px;
}

.div4{
position: absolute;
top: 200px;
left: 425px;
}

</style>
<body>
<div class="div1">
<table class="table table-striped table-responsive">

    <tr>
        <td>1</td>
        <td>5</td>
        <td>5</td>
    </tr>
    <tr>
        <td></td>
        <td>A</td>
        <td></td>
    </tr>
    <tr>
        <td>1</td>
        <td>0</td>
        <td>5</td>
    </tr>
   </table>
  </div>

  <div class="div2">
  <table class="table table-striped table-responsive">
    <tr>
        <td>6</td>
        <td>5</td>
        <td>10</td>
    </tr>
    <tr>
        <td></td>
        <td>B</td>
        <td></td>
    </tr>
    <tr>
        <td>11</td>
        <td>5</td>
        <td>15</td>
    </tr>
   </table>
   </div>   

   <div class="div3">
    <table class="table table-striped table-responsive">
    <tr>
        <td>6</td>
        <td>10</td>
        <td>15</td>
    </tr>
    <tr>
        <td></td>
        <td>C</td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td>0</td>
        <td>15</td>
    </tr>
   </table>
   </div>

 <div class="div4"> 
  <table class="table table-striped table-responsive">
    <tr>
        <td>16</td>
        <td>15</td>
        <td>30</td>
    </tr>
    <tr>
        <td></td>
        <td>D</td>
        <td></td>
    </tr>
    <tr>
        <td>16</td>
        <td>0</td>
        <td>30</td>
    </tr>
    </table>
  </div>

   </body> 
   </html>

1 Resposta 1

3

Se entendi, você precisa de algo como: inserir a descrição da imagem aqui

Uma opção é você adicionar uma div após cada table exemplo:

<div>
    <img class="seta310" src="arrow.png" />
</div>

Feito isso, você pode criar classes CSS para posicionar suas divs e utilizar um recurso do CSS3 chamado transform, exemplo:

/*Rotacionando em 310 graus*/
.seta310
{
    position: relative;
    left: 100px;
    top: 150px;

    -ms-transform: rotate(310deg); /* IE 9 */
    -webkit-transform: rotate(310deg); /* Chrome, Safari, Opera */
    transform: rotate(310deg);
}

Feito isso para primeira seta, você pode rotacionar as demais.

Exemplo: Fiddle

Você deve fazer log-in para responder a esta pergunta.