juptrking/dabblet.css

## dabblet.css
/**
* Masking with equilateral triangles in CSS
*/

body{
	background: #fff;
	min-height: 100%;
}

/*
The tricky part is finding the amplitude (height) of an equilateral triangle (here it's 259px).
h =  (1/2) * √3 * a (use a to find h where h is the aplitude and a is a side).

You can use a calculator here...
http://www.calculatorsoup.com/calculators/geometry-plane/triangles-equilateral.php

Or you can use this handy JS calculation by @saulhardman...
h = Math.sqrt( (a * a) - ( a / 2 ) * ( a / 2 ) );
*/

.triangleMask{
	width: 300px;
	height: 259px;
	position: relative;
	display: block;
	overflow: hidden;
}

/*
You may have seen the CSS triangle hack before. Here we create two triangles either side of the div to mask the content.
You'll want your top border width to match the amplitude (h) of your triangle and all other border sides to be half your side length (a/2).

If you haven't seen the triangle hack before, check out the excellent tutorial by @chriscoyier.
http://css-tricks.com/snippets/css/css-triangle/
*/

.triangleMask:after, .triangleMask:before{
	content: ' ';
	position: absolute;
	display: block;
	border-width: 259px 150px 150px;
	border-style: solid;
	height: 0px;
	width: 0px;
	z-index: 1111;
	top: 0;
	left: 0;
	pointer-events: none;
}

.triangleMask:after{
	border-color: transparent transparent transparent white;
}

.triangleMask:before{
	border-color: transparent white transparent transparent;
}

/*Hack to crop out map options*/

iframe{
	margin-top: -100px
}

## dabblet.html
<body>

<div class="triangleMask">
	<!--Maps are great, but you can crop what ever you like!-->
	<iframe width="425" height="370" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&amp;ll=51.526742,-0.081668&amp;spn=0.010159,0.033023&amp;t=m&amp;z=16&amp;output=embed"></iframe>
</div>

</body>

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Masking with equilateral triangles in CSS
	*/

	body{
	background: #fff;
	min-height: 100%;
	}

	/*
	The tricky part is finding the amplitude (height) of an equilateral triangle (here it's 259px).
	h = (1/2) * √3 * a (use a to find h where h is the aplitude and a is a side).

	You can use a calculator here...
	http://www.calculatorsoup.com/calculators/geometry-plane/triangles-equilateral.php

	Or you can use this handy JS calculation by @saulhardman...
	h = Math.sqrt( (a * a) - ( a / 2 ) * ( a / 2 ) );
	*/

	.triangleMask{
	width: 300px;
	height: 259px;
	position: relative;
	display: block;
	overflow: hidden;
	}

	/*
	You may have seen the CSS triangle hack before. Here we create two triangles either side of the div to mask the content.
	You'll want your top border width to match the amplitude (h) of your triangle and all other border sides to be half your side length (a/2).

	If you haven't seen the triangle hack before, check out the excellent tutorial by @chriscoyier.
	http://css-tricks.com/snippets/css/css-triangle/
	*/

	.triangleMask:after, .triangleMask:before{
	content: ' ';
	position: absolute;
	display: block;
	border-width: 259px 150px 150px;
	border-style: solid;
	height: 0px;
	width: 0px;
	z-index: 1111;
	top: 0;
	left: 0;
	pointer-events: none;
	}

	.triangleMask:after{
	border-color: transparent transparent transparent white;
	}

	.triangleMask:before{
	border-color: transparent white transparent transparent;
	}

	/Hack to crop out map options/

	iframe{
	margin-top: -100px
	}
	<body>

	<div class="triangleMask">
	<!--Maps are great, but you can crop what ever you like!-->
	<iframe width="425" height="370" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&ll=51.526742,-0.081668&spn=0.010159,0.033023&t=m&z=16&output=embed"></iframe>
	</div>

	</body>