Created
July 14, 2013 17:07
-
-
Save jarrodmedrano/5994953 to your computer and use it in GitHub Desktop.
css gradient for triangle shaped arrow (SO)
This file contains hidden or 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
/** | |
* css gradient for triangle shaped arrow (SO) | |
* http://stackoverflow.com/q/12431596/1397351 | |
*/ | |
.shape { | |
float: left; | |
position: relative; | |
border: 1px solid #ccc; | |
border-right: none; | |
width: 240px; height: 80px; | |
background: linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6); | |
cursor: pointer; | |
} | |
.shape:after { | |
position: absolute; | |
top: 50%; right: 0; | |
margin: -24px -20px; | |
border-top: solid 1px #ccc; | |
border-right: solid 1px #ccc; | |
width: 40px /* 80px/2 */; height: 47px/* 80px/sqrt(3) */; | |
transform: rotate(30deg) skewY(30deg); /* create a rhombus */ | |
/* 49.1deg = atan(1.15) = atan(47px/40px) */ | |
background: linear-gradient(-49.1deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white); | |
content: '' | |
} |
This file contains hidden or 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
<!-- content to be placed inside <body>…</body> --> | |
<div class='shape'></div> |
This file contains hidden or 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
// alert('Hello world!'); |
This file contains hidden or 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-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment