%ul
	- 2.times do
		%li
			.link
				- 4.times do
					%a{:href => "https://codepen.io/gabriellewee", :target => "_blank"}

%svg.clips{:viewbox => "0 0 0 0", :xmlns => "http://www.w3.org/2000/svg"}
	%defs
		%clippath#clip-right
			%polygon{:points => "48 0 48 96 0 48"}
		%clippath#clip-left
			%polygon{:points => "0 0 0 96 48 48"}
		%clippath#clip-bottom
			%polygon{:points => "96 48 0 48 48 0"}
		%clippath#clip-top
			%polygon{:points => "0 0 96 0 48 48"}

$p: 12px;

*, *:before, *:after { box-sizing: border-box; }
* { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }
body {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: $p;
	font-size: 14px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

ul {
	display: flex;
	padding: $p;
	li {
		padding: $p;
	}
}

.clips {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	opacity: 0;
	z-index: -100;
}

.link {
	position: relative;
	width: $p*8;
	height: $p*8;
	a {
		display: block;
		position: absolute;
	}
}

li {
	&:nth-child(1) {
		.link {
			a {
				width: 100%;
				height: 100%;
				&:nth-child(1) {
					top: 0;
					left: 0;
					height: 50%;
					clip-path: polygon(50% 100%, 0 0, 100% 0);
					@-moz-document url-prefix() {
						clip-path: url(#clip-top);
					}
				}
				&:nth-child(2) {
					top: 0;
					right: 0;
					width: 50%;
					clip-path: polygon(100% 100%, 0 50%, 100% 0);
					@-moz-document url-prefix() {
						clip-path: url(#clip-right);
					}
				}
				&:nth-child(3) {
					bottom: 0;
					right: 0;
					height: 50%;
					clip-path: polygon(0 100%, 50% 0, 100% 100%);
					@-moz-document url-prefix() {
						clip-path: url(#clip-bottom);
					}
				}
				&:nth-child(4) {
					bottom: 0;
					left: 0;
					width: 50%;
					clip-path: polygon(0 100%, 0 0, 100% 50%);
					@-moz-document url-prefix() {
						clip-path: url(#clip-left);
					}
				}
			}
		}
	}
	&:nth-child(2) {
		.link {
			a {
				width: 50%;
				height: 50%;
				&:nth-child(1) {
					top: 0;
					left: 0;
				}
				&:nth-child(2) {
					top: 0;
					right: 0;
				}
				&:nth-child(3) {
					bottom: 0;
					right: 0;
				}
				&:nth-child(4) {
					bottom: 0;
					left: 0;
				}
			}
		}
	}
}

.link {
	a {
		&:nth-child(1) {
			background: red;
		}
		&:nth-child(2) {
			background: blue;
		}
		&:nth-child(3) {
			background: green;
		}
		&:nth-child(4) {
			background: purple;
		}
	}
}