Skip to content

Instantly share code, notes, and snippets.

@jarrodmedrano
Created July 14, 2013 17:07
Show Gist options
  • Save jarrodmedrano/5994953 to your computer and use it in GitHub Desktop.
Save jarrodmedrano/5994953 to your computer and use it in GitHub Desktop.
css gradient for triangle shaped arrow (SO)
/**
* 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: ''
}
<!-- content to be placed inside <body>…</body> -->
<div class='shape'></div>
// alert('Hello world!');
{"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