-
-
Save marcwiest/618142a19d467d5544532a3946c32771 to your computer and use it in GitHub Desktop.
Masking with equilateral triangles in CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment