SOURCE

<div class="jigsaw" >
		<div class="m1 c1 c2 c3 c4"></div>
		<div class="m2 c5"></div>
		<div class="m3 c6"></div>
		<div class="m4 c7"></div>
	</div>

.jigsaw{position: relative; width: 240px;height: 240px; margin: 20px auto;}
	.jigsaw > div{position: absolute; width: 0;height: 0; font-size: 0; line-height: 0;}
	.jigsaw > .m1{border: 120px solid transparent; left: 0;top: 0;}
	.jigsaw > .m2{border: 60px solid transparent; right: 0;top: 0;}
	.jigsaw > .m3{border: 60px solid transparent; left: 60px;top: 60px;}
	.jigsaw > .m4{border: 60px solid transparent; right: 0;bottom: 0;}

	.jigsaw > .c1{border-left-color: red;}
	.jigsaw > .c2{border-top-color: orange;}
	.jigsaw > .c3{border-right-color: yellow;}
	.jigsaw > .c4{border-bottom-color: green;}
	.jigsaw > .c5{border-top-color: aqua;border-right-color: aqua;}
	.jigsaw > .c6{border-top-color: blue;}
	.jigsaw > .c7{border-right-color: purple;}