Flags (In progress!)

dabblet.css

/**
 * Flags (In progress!)
 */
 
@font-face {
	font-family: 'WPSymbols';
	src: url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.woff') format('woff'),
		 url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.ttf') format('truetype');
}
 
body {
	background: #f9f7f3;
	padding: 100px;
}

.flags {
	display: inline-block;
	text-transform: uppercase;
	font: 100% Gudea, sans-serif;
}

.flags > h3 {
	display: inline-block;
	vertical-align: text-top;
	font: 100% Gudea, sans-serif;
	color: hsl(40, 34%, 40%);
	text-shadow: 0 1px 1px white;
}

.flags ul {
	display: inline-block;
	padding: 0 0 0 2em;
}

.flags li {
	position: absolute;
	display: inline-block;
	padding: .2em .6em .2em 0;
	margin: 0 .3em;
	transform: rotate(90deg);
	transform-origin: left top;
	list-style: none;
	background: hsl(2, 69%, 48%);
	border-radius: .4em 1em 1em 0;
	box-shadow: 2px 0 10px -2px rgba(0,0,0,.5);
}

.flags li:nth-child(2) {
	margin-left: 2.8em;
}

.flags li:nth-child(3) {
	margin-left: 5.4em;
}

.flags li:nth-child(4) {
	margin-left: 7.8em;
}

.flags li[title="Needs Review"] {
	background: #694D9F;
}

.flags li[title="Missing Content"] {
	background: #2EB3C4;
}

.flags li[title="Deletion/Move Candidate"] {

}

.flags li[title="Contains Errors"] {
	background: #7F1333;
}

/* Triangle */
.flags li:before {
	content: '';
	position: absolute;
	left: 0; bottom: -5px;
	width: 0; height: 0;
	border: solid transparent;
	border-top-color: hsl(2, 69%, 25%);
	border-width: 5px 0 0 5px;
}

.flags li a {
	display: block;
	color: white;
	text-shadow: 0 -1px 2px rgba(0,0,0,.3);
	white-space: nowrap;
	text-align: right;
	text-decoration: none;
	overflow: hidden;
	transition: 1s;
	text-indent: -9em;
}

	.flags li[title="Needs Review"] a {
		text-indent: -7em;
	}
	
	.flags li[title="Missing Content"] a {
		text-indent: -8.5em;
	}
	
	.flags li[title="Deletion/Move Candidate"] a {
		text-indent: -13em;
	}

	.flags li[title="Contains Errors"] a {
		text-indent: -8.7em;
	}

/* Crazy hack for padding-left */
.flags li a:before {
	content: '';
	display: inline-block;
	padding: 0 .2em;
}

.flags li:hover a {
	text-indent: 0;
}

.flags li a:after {
	content: '✖';
	display: inline-block;
	margin-left: 1em;
	text-indent: 0;
	font-family: sans-serif;
}
	.flags li[title="Needs Review"] a:after {
		content: '👀'
	}
	
	.flags li[title="Missing Content"] a:after {
		/* Question mark or magnifying glass */
	}
	
	.flags li[title="Deletion/Move Candidate"] a:after {
		/* Trash can icon */
	}

	.flags li[title="Contains Errors"] a:after {
		/* X icon, like the current one */
	}

dabblet.html

<div class="flags">

<ul>
	<li class="flag" title="Needs Review">
		<a href>Needs Review</a>
	</li>
	<li class="flag" title="Missing Content">
		<a href>Missing Content</a>
	</li>
	<li class="flag" title="Deletion/Move Candidate">
		<a href>Deletion/Move Candidate</a>
	</li>
	<li class="flag" title="Contains Errors">
		<a href>Contains Errors</a>
	</li>
</ul>

</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

Hey LeaVerou, I really like your products. Their are pretty cool! And I can study a lot of tips from them. Thanks very much.