Clip path expirment

dabblet.css

/**
 * Clip path expirment
 */
html, body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	margin: 0;
	padding: 0;
}
.event {
	display: block;
	position: absolute;
	background: purple;
	width: 40%;
	height: 100%;
}
.event.uno {
	-webkit-clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
	z-index: 10;
}
.event.dos, .event.tres {
	width: 60%;
	height: 50%;
	right: 0;
	background: orange;
}
.event.tres {
	bottom: 0;
	background: green;
}

dabblet.html

<div class="event uno"></div>
<div class="event dos"></div>
<div class="event tres"></div>

dabblet.js

// alert('Hello world!');

settings.json

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