Skip to content

Instantly share code, notes, and snippets.

@sorahn sorahn/dabblet.css
Created Jan 23, 2014

Embed
What would you like to do?
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: -29px; /* this number looks god, but I'd love to be able to get it programatically with SCSS/LESS */
border-top: solid 1px #ccc;
border-right: solid 1px #ccc;
width: 56.56px; height: 56.56px; /* (sqrt(2)/) * 80 */
transform: scaleX(0.6) translateY(-50%) rotate(45deg); /* create a rhombus */
background: linear-gradient(-45deg, #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
You can’t perform that action at this time.