Insert CSS to show dependencies

Asked

Viewed 158 times

2

I need to develop an HTML document similar to the image below:

inserir a descrição da imagem aqui

I’m having trouble making the calls, look who’s my project.

inserir a descrição da imagem aqui

I need you to stay more or less like this

inserir a descrição da imagem aqui

My html is like this:

<!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>
html5 css3

1 answer

3


If I understand you, you need something like: inserir a descrição da imagem aqui

One option is you add a div after each table example:

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

Once this is done, you can create CSS classes to position your Ivs and use a CSS3 called Transform, example:

/*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);
}

Done this for first arrow, you can rotate the others.

Example: Fiddle

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.