Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

prea

Fluxograma com Divs

Por , em Desenvolvimento frontend

Recommended Posts

prea    0

prea
Postado

Alguem tem alguma ideia de como fazer um fluxograma usando divs.

 

Uma div em baixo da outra ligado por linhas.

Mais essa linha pode tanto ir para proxima div quanto para outra div qualquer no fluxo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

É bem complicado fazer do jeito que você quer, rapaz.

Não recomendo não.

 

Com CSS3 talvez dê pra tentar, mas não garanto muita coisa...

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Apenas com CSS é praticamente impossivel no momento, mesmo com CSS3.

 

Porém, com JS, e as ferramentas certas, você pode conseguir algo interessante:

Raphael.js -> Demo

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

Você pode tentar fazer com divs e spans, utilizando position:absolute; e top e left para alinhar, mas fazendo dessa forma seu código vai ficar muito grande, pois dificilmente conseguirá trabalhar com classes, terá que trabalhar com IDs individuais para cada item do fluxograma, e também ficará desorganizado.

 

Aqui eu fiz um exemplo simples de que é possível:

 

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>

<style>
*{margin:0; padding:0;}

#fluxo_box1{background-color:#CCC; height:150px; position:absolute; width:300px;}
span#fluxo_conector_down1{border-left:2px dashed #000; height:100px; left:150px; overflow:hidden; position:absolute; top:150px; width:1px;}

#fluxo_box2{background-color:#CCC; height:150px; left:100px; position:absolute; top:250px; width:350px;}
span#fluxo_conector_down2{border-left:2px dashed #000; height:100px; left:150px; overflow:hidden; position:absolute; top:400px; width:1px;}
span#fluxo_conector_right1{border-bottom:2px dashed #000; height:1px; left:450px; overflow:hidden; position:absolute; top:325px; width:150px;}

#fluxo_box3{background-color:#CCC; height:100px; left:600px; position:absolute; top:300px; width:150px;}
</style>

</head>

<body>

<div id="fluxo_box1">Caixa Fluxograma 1</div>
<span id="fluxo_conector_down1"></span>
<div id="fluxo_box2">Caixa fluxograma 2</div>
<span id="fluxo_conector_right1"></span>
<span id="fluxo_conector_down2"></span>
<div id="fluxo_box3">Caixa fluxograma 3</div>

</body>
</html>

 

 

Agora se esta correto eu não garanto. (acredito que esteja errado)

 

Acredito que seja melhor utilizar algo como o que o JCMais postou, ou fazer com imagens mesmo.

 

 

 

Abraços

João Prado

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito