Simple workflow representation

by for3v3rforgott3n

HTML

<span class="item">Source</span> <div class="arrow-right"></div> <span class="item">A</span> <div class="arrow-right"></div> <span class="item">B</span> <div class="arrow-right"></div> <span class="item">C</span>

CSS

body {
	font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}
.item {
    background: #00E6E6;
    display: inline-block;
    padding: 2px;
}

.arrow-left {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 5px solid black;
}

.arrow-right {
    display: inline-block;
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid black;
}

.arrow-up {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid black;
}

.arrow-down {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid black;
}