Gráfico de organización jerárquica adaptable en CSS puro

Vista prévia

Descripción

Un simple, responsivo, jerárquico < a href = "https://wikicss.com/tag/organization-chart/" > Organigrama /árbol genealógico implementado en CSS puro y listas HTML anidadas.

Funcionamiento

Cree el organigrama jerárquico a partir de listas ordenadas anidadas de la siguiente manera:

<ol class="organizational-chart">

<li>


<div>



<h1>Primary</h1>


</div>


<div>



<h1>Primary</h1>


</div>


<div>



<h1>Primary</h1>


</div>


<ol>



<li>




<div>





<h2>Secondary</h2>




</div>




<ol>





<li>






<div>







<h3>Tertiary</h3>






</div>





</li>





<li>






<div>







<h3>Tertiary</h3>






</div>






<ol>







<li>








<div>









<h4>Quaternary</h4>








</div>







</li>







<li>








<div>









<h4>Quaternary</h4>








</div>








<ol>









<li>










<div>











<h5>Quinary</h5>










</div>









</li>









<li>










<div>











<h5>Quinary</h5>










</div>










<ol>











<li>












<div>













<h6>Senary</h6>












</div>











</li>










</ol>









</li>








</ol>







</li>







<li>








<div>









<h4>Quaternary</h4>








</div>







</li>






</ol>





</li>





<li>






<div>







<h3>Tertiary</h3>






</div>





</li>




</ol>



</li>



<li>




<div>





<h2>Secondary</h2>




</div>




<ol>





<li>






<div>







<h3>Tertiary</h3>






</div>





</li>





<li>






<div>







<h3>Tertiary</h3>






</div>






<ol>







<li>








<div>









<h4>Quaternary</h4>








</div>







</li>







<li>








<div>









<h4>Quaternary</h4>








</div>







</li>







<li>








<div>









<h4>Quaternary</h4>








</div>







</li>






</ol>





</li>




</ol>



</li>



<li>




<div>





<h2>Secondary</h2>




</div>




<ol>





<li>






<div>







<h3>Tertiary</h3>






</div>






<ol>







<li>








<div>









<h4>Quaternary</h4>








</div>








<ol>









<li>










<div>











<h5>Quinary</h5>










</div>










<ol>











<li>












<div>













<h6>Senary</h6>












</div>











</li>











<li>












<div>













<h6>Senary</h6>












</div>











</li>










</ol>









</li>









<li>










<div>











<h5>Quinary</h5>










</div>









</li>








</ol>







</li>






</ol>





</li>





<li>






<div>







<h3>Tertiary</h3>






</div>





</li>





<li>






<div>







<h3>Tertiary</h3>






</div>





</li>




</ol>



</li>



<li>




<div>





<h2>Secondary</h2>




</div>




<ol>





<li>






<div>







<h3>Tertiary</h3>






</div>





</li>





<li>






<div>







<h3>Tertiary</h3>






</div>





</li>





<li>






<div>







<h3>Tertiary</h3>






</div>






<ol>







<li>








<div>









<h4>Quaternary</h4>








</div>







</li>







<li>








<div>









<h4>Quaternary</h4>








</div>







</li>






</ol>





</li>





<li>






<div>







<h3>Tertiary</h3>






</div>





</li>





<li>






<div>







<h3>Tertiary</h3>






</div>





</li>




</ol>



</li>


</ol>

</li>
</ol>

Los principales estilos CSS para el organigrama.

ol.organizational-chart,
ol.organizational-chart ol,
ol.organizational-chart li,
ol.organizational-chart li > div {


position: relative;
}

ol.organizational-chart,
ol.organizational-chart ol {


list-style: none;


margin: 0;


padding: 0;
}

ol.organizational-chart {


text-align: center;
}

ol.organizational-chart ol {


padding-top: 1em;
}

ol.organizational-chart ol:before,
ol.organizational-chart ol:after,
ol.organizational-chart li:before,
ol.organizational-chart li:after,
ol.organizational-chart > li > div:before,
ol.organizational-chart > li > div:after {


background-color: #b7a6aa;


content: '';


position: absolute;
}

ol.organizational-chart ol > li {


padding: 1em 0 0 1em;
}

ol.organizational-chart > li ol:before {


height: 1em;


left: 50%;


top: 0;


width: 3px;
}

ol.organizational-chart > li ol:after {


height: 3px;


left: 3px;


top: 1em;


width: 50%;
}

ol.organizational-chart > li ol > li:not(:last-of-type):before {


height: 3px;


left: 0;


top: 2em;


width: 1em;
}

ol.organizational-chart > li ol > li:not(:last-of-type):after {


height: 100%;


left: 0;


top: 0;


width: 3px;
}

ol.organizational-chart > li ol > li:last-of-type:before {


height: 3px;


left: 0;


top: 2em;


width: 1em;
}

ol.organizational-chart > li ol > li:last-of-type:after {


height: 2em;


left: 0;


top: 0;


width: 3px;
}

ol.organizational-chart li > div {


background-color: #fff;


border-radius: 3px;


min-height: 2em;


padding: 0.5em;
}

/*** PRIMARY ***/
ol.organizational-chart > li > div {


background-color: #a2ed56;


margin-right: 1em;
}

ol.organizational-chart > li > div:before {


bottom: 2em;


height: 3px;


right: -1em;


width: 1em;
}

ol.organizational-chart > li > div:first-of-type:after {


bottom: 0;


height: 2em;


right: -1em;


width: 3px;
}

ol.organizational-chart > li > div + div {


margin-top: 1em;
}

ol.organizational-chart > li > div + div:after {


height: calc(100% + 1em);


right: -1em;


top: -1em;


width: 3px;
}

/*** SECONDARY ***/
ol.organizational-chart > li > ol:before {


left: inherit;


right: 0;
}

ol.organizational-chart > li > ol:after {


left: 0;


width: 100%;
}

ol.organizational-chart > li > ol > li > div {


background-color: #83e4e2;
}

/*** TERTIARY ***/
ol.organizational-chart > li > ol > li > ol > li > div {


background-color: #fd6470;
}

/*** QUATERNARY ***/
ol.organizational-chart > li > ol > li > ol > li > ol > li > div {


background-color: #fca858;
}

/*** QUINARY ***/
ol.organizational-chart > li > ol > li > ol > li > ol > li > ol > li > div {


background-color: #fddc32;
}

Haga que el organigrama sea totalmente receptivo en todo el navegador.

@media only screen and ( min-width: 64em ) {



ol.organizational-chart {




margin-left: -1em;




margin-right: -1em;


}



/* PRIMARY */


ol.organizational-chart > li > div {




display: inline-block;




float: none;




margin: 0 1em 1em 1em;




vertical-align: bottom;


}



ol.organizational-chart > li > div:only-of-type {




margin-bottom: 0;




width: calc((100% / 1) - 2em - 4px);


}



ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2),


ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {




width: calc((100% / 2) - 2em - 4px);


}



ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3),


ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {




width: calc((100% / 3) - 2em - 4px);


}



ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4),


ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {




width: calc((100% / 4) - 2em - 4px);


}



ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5),


ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {




width: calc((100% / 5) - 2em - 4px);


}



ol.organizational-chart > li > div:before,


ol.organizational-chart > li > div:after {




bottom: -1em!important;




top: inherit!important;


}



ol.organizational-chart > li > div:before {




height: 1em!important;




left: 50%!important;




width: 3px!important;


}



ol.organizational-chart > li > div:only-of-type:after {




display: none;


}



ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after,


ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {




bottom: -1em;




height: 3px;




width: calc(50% + 1em + 3px);


}



ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after {




left: calc(50% + 3px);


}



ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {




left: calc(-1em - 3px);


}



ol.organizational-chart > li > div + div:not(:last-of-type):after {




height: 3px;




left: -2em;




width: calc(100% + 4em);


}



/* SECONDARY */


ol.organizational-chart > li > ol {




display: flex;




flex-wrap: nowrap;


}



ol.organizational-chart > li > ol:before,


ol.organizational-chart > li > ol > li:before {




height: 1em!important;




left: 50%!important;




top: 0!important;




width: 3px!important;


}



ol.organizational-chart > li > ol:after {




display: none;


}



ol.organizational-chart > li > ol > li {




flex-grow: 1;




padding-left: 1em;




padding-right: 1em;




padding-top: 1em;


}



ol.organizational-chart > li > ol > li:only-of-type {




padding-top: 0;


}



ol.organizational-chart > li > ol > li:only-of-type:before,


ol.organizational-chart > li > ol > li:only-of-type:after {




display: none;


}



ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after,


ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {




height: 3px;




top: 0;




width: 50%;


}



ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after {




left: 50%;


}



ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {




left: 0;


}



ol.organizational-chart > li > ol > li + li:not(:last-of-type):after {




height: 3px;




left: 0;




top: 0;




width: 100%;


}

}