Diagramy v CSS bez použití obrázků

Diagramy všeho možného, formátované pouze pomocí CSS.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Tommy Olsson. Bližší popis najdete v článku CSS Diagrams.

CSS

#diagram
{
position: relative;
margin: 0 auto;
width: 35em;
height: 24em;
}
#diagram abbr, #diagram acronym
{
border-bottom: 0
}
#diagram div
{
border: 0.05em solid #000;
}
#diagram div, #diagram li
{
position: absolute;
margin: 0;
padding: 0;
}
#diagram
{
margin: 0;
padding: 0;
font-size: 1em;
font-weight: normal;
line-height: 2;
text-align: center;
}
#current
{
background-color: #33c;
color: #fff;
}
#current h3
{
font-weight: bold
}
#diagram div li a
{
display: block;
position: absolute;
border: 0.05em dotted #666;
background-color: #eee;
line-height: 2;
text-align: center;
}
#diagram div li a:link
{
color: #00f
}
#diagram div li a:visited
{
color: #906
}
#diagram div li a:hover, #diagram div li a:focus
{
color: #f60
}
#diagram div li a:
{
color: #f00
}
#diagram li samp
{
background-color: transparent;
color: #069;
}
#diagram li samp var
{
background-color: transparent;
color: #930;
font-style: normal;
}
#diagram li span
{
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
* html #diagram li span
{
font-size: 0;
f\ont-size: 1em;
}
* html #diagram .circ-top span,
* html #diagram .down span,
* html #diagram .up span
{
width: 8px;
w\idth: 0;
height: 4px;
he\ight: 0;
}
* html #diagram .circ-right span,
* html #diagram .right span,
* html #diagram .down-right span,
* html #diagram .up-right span
{
width: 4px;
w\idth: 0;
height: 8px;
he\ight: 0;
}
#diagram ul
{
margin: 0;
padding: 0;
list-style: none inside;
}
* html #diagram ul
{
width: 0
}
#diagram .circ-right
{
top: 0.5em;
left: 100%;
width: 1em;
margin-left: 0.05em;
height: 1em;
border: 0.05em solid #000;
border-left: 0;
}
#diagram .circ-right samp
{
position: absolute;
left: 100%;
}
#diagram .circ-top
{
bottom: 100%;
left: 0.5em;
width: 1em;
height: 1em;
margin-bottom: 0.05em;
border: 0.05em solid #000;
border-bottom: 0;
}
#diagram .circ-top samp
{
position: absolute;
bottom: 100%;
}
#diagram .down
{
top: 100%;
left: 50%;
margin-top: 0.05em;
border-left: 0.05em solid #000;
}
#diagram .down a
{
top: 100%;
left: 0;
}
#diagram .down-right
{
top: 100%;
left: 100%;
margin-bottom: 0.05em;
margin-left: -1em;
border-bottom: 0.05em solid #000;
border-left: 0.05em solid #000;
}
#diagram .down-right a
{
bottom: -1em;
left: 100%;
}
#diagram .right
{
top: 0;
left: 100%;
margin-left: 0.05em;
border-bottom: 0.05em solid #000;
}
#diagram .right a
{
top: 0;
left: 100%;
}
#diagram .up
{
bottom: 100%;
left: 50%;
margin-bottom: 0.05em;
border-left: 0.05em solid #000;
}
#diagram .up samp, #diagram .up-right samp
{
position: absolute;
bottom: 0;
}
#diagram .up-right
{
bottom: 100%;
left: 100%;
margin-bottom: 0.05em;
margin-left: -1em;
border-top: 0.05em solid #000;
border-left: 0.05em solid #000;
}
#diagram .up-right a
{
top: -1em;
left: 100%;
}
#diagram .circ-right span
{
top: -0.3em;
left: 0;
border-top: 0.3em solid #fff;
border-right: 0.5em solid #000;
border-bottom: 0.3em solid #fff;
}
* html #diagram .circ-right span
{
top: -4px;
t\op: -0.3em;
border-width: 4px 4px 4px 0;
b\order-width: 0.3em 0.5em 0.3em 0;
}
#diagram .circ-top span, #diagram .down span
{
bottom: 0;
left: -0.3em;
border-top: 0.5em solid #000;
border-right: 0.3em solid #fff;
border-left: 0.3em solid #fff;
}
* html #diagram .circ-top span, * html #diagram .down span
{
left: -4px;
lef\t: -0.3em;
border-width: 4px 4px 0;
b\order-width: 0.5em 0.3em 0;
}
#diagram .down-right span, #diagram .right span
{
right: 0;
bottom: -0.3em;
border-top: 0.3em solid #fff;
border-bottom: 0.3em solid #fff;
border-left: 0.5em solid #000;
}
* html #diagram .down-right span, * html #diagram .right span
{
bottom: -4px;
b\ottom: -0.3em;
border-width: 4px 0 4px 4px;
b\order-width: 0.3em 0 0.3em 0.5em;
}
#diagram .up span
{
top: 0;
left: -0.3em;
border-right: 0.3em solid #fff;
border-bottom: 0.5em solid #000;
border-left: 0.3em solid #fff;
}
* html #diagram .up span
{
left: -4px;
lef\t: -0.3em;
border-width: 0 4px 4px 4px;
b\order-width: 0 0.3em 0.5em 0.3em;
}
#diagram .up-right span
{
top: -0.3em;
right: 0;
border-top: 0.3em solid #fff;
border-bottom: 0.3em solid #fff;
border-left: 0.5em solid #000;
}
* html #diagram .up-right span
{
top: -4px;
t\op: -0.3em;
border-width: 4px 0 4px 4px;
b\order-width: 0.3em 0 0.3em 0.5em;
}
.row1
{
top: 3em
}
.row2
{
top: 9em
}
.row3
{
top: 15em
}
.col1
{
left: 3em
}
.col2
{
left: 11em
}
.col3
{
left: 12em
}
.size1
{
width: 4em
}
.size2
{
width: 8em
}
.size3
{
width: 10em
}
a.size3
{
margin-left: -5em
}
.size4
{
width: 6.95em;
height: 1.95em;
}
.size5
{
width: 5.95em;
height: 1.95em;
}
.height1
{
height: 3.9em
}
.width1
{
width: 4.9em
}
.width2
{
width: 5.9em
}

XHTML

<html>
<body>
<div id=>“diagram“>
<div id=>“current“ class=>“row2 col1 size1″>
<h3>Start</h3>
<ul>
<li class=>“circ-top“><samp><var><space></var></samp></li>
<li class=>“down height1″><samp>*</samp>
</li>
<li class=>“right width1″><samp><</samp></li>
</ul>
</div>
<div class=>“row3 col1 size1″>
<h3><abbr title=“HyperText Markup Language“>HTML</abbr></h3>
<ul>
<li class=>“circ-right“><samp>*</samp></li>
<li class=>“down height1″><samp><</samp><a href=“#“ class=>“size3″>OtevřeContentTag</a>
</li>
</ul>
</div>
<div class=>“row2 col3 size2″>
<h3>OtevřeRootTag</h3>
<ul>
<li class=>“up height1″><samp>!</samp></li>
<li class=>“right width2″><samp>?</samp><a href=“#“ class=>“size2″>OtevřePI</a>
</li>
<li class=>“down-right size4″><samp><var><id></var></samp><a href=“#“ class=>“size2″>StartTag</a>
</li>
</ul>
</div>
<div class=>“row1 col2 size3″>
<h3>OtevřeRootDirective</h3>
<ul>
<li class=>“up-right size5″><samp>-</samp><a href=“#“ class=>“size2″>OtevřeComment1</a>
</li>
<li class=>“right width1″><samp>DOCTYPE</samp><a href=“#“ class=>“size2″>OtevřeDocType</a>
</li>
<li class=>“down-right size5″><samp>[</samp><a href=“#“ class=>“size2″>OtevřeCDATA1</a>
</li>
</ul>
</div>
</div>
</body>
</html>