slanted menu

dabblet.css

/* slanted menu
*/
html { background-color: #222; }
body {
	font-family: Tahoma, sans-serif;
	padding: 10px 0;
	max-width: 20em;
	margin: 1em auto;
	background-color: #fff;
	font-size: 30px;
}

.wrap {
	width: 100%;
	overflow: hidden;	
}
.wrap-bottom {
	border-top: 0.2em solid #d90000;
	position: relative;
	top: -0.4em;
	margin-bottom: -0.4em;
	z-index: 2;
	clear: both;
}

.content {
	border: 1px solid red;
	background-color: #fff;
	position: relative;
	z-index: 1;
}


.item {
	text-align: center;	
	float: left;
	position: relative;
	background-color: transparent;
	min-width: 32%;
	margin-right: 1%;
	color: #fff;
	padding-bottom: 0.3em;
	z-index: 1;
	text-decoration: none;
}
.item_last {
	min-width: 34%;
	margin-right: 0;
}
.item_last .slant {

}
.slant {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ff0000;
	background-image: linear-gradient(to bottom, #ffb3b3,#ff0000 1em);
	z-index: -1;
	transform: skewX(30deg);
	border-radius: 0.1em;
}
.item_first .slant {
	left: auto;
	right: 0;
	width: 200%;
}
.item_last .slant {
	left: 0;
	width: 200%;
}

.item.active {
	z-index: 3;
}

.item:hover {
	color: #fff;
}
.item:hover .slant {
	background: blue;
}

dabblet.html

<div class="wrap">
	<a class="item item_first" href="#">First<span class="slant"></span></a>
	<a class="item active" href="#">Another<span class="slant"></span></a>
	<a class="item item_last" href="#">Last<div class="slant"></div></a>
	<div class="wrap-bottom"></div>
	<div class="content">content</div>
</div>

dabblet.js

?// alert('Hello world!');

settings.json

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