Skip to content

Instantly share code, notes, and snippets.

@danielkoch

danielkoch/triangle.css

Last active June 3, 2019 11:50
Show Gist options
  • Save danielkoch/5066956 to your computer and use it in GitHub Desktop.
Save danielkoch/5066956 to your computer and use it in GitHub Desktop.
Download ZIP
css gradient for triangle shaped arrow (SO)
Raw
triangle.css
/**
* css gradient for triangle shaped arrow (SO)
* http://stackoverflow.com/questions/12431596/css-gradient-for-triangle-shaped-arrow
*/
.rectangle {
float: left;
position: relative;
height: 80px;
width: 240px;
border: solid 1px #ccc;
border-right: none;
background: #eee linear-gradient(#ed1c24, #ed1c24 37%, #af001a 57%, #af001a);
cursor: pointer;
z-index: 99;
}
.rectangle:after {
position: absolute;
top: 16px; right: -25px;
width: 48px;
height: 47px;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
transform: rotate(134deg) skewX(-10deg) skewY(-10deg);
background: #eee linear-gradient(45deg, #ed1c24, #ed1c24 37%, #af001a 57%, #af001a);
content: '';
z-index: 0;
}
Raw
triangle.html
<!-- content to be placed inside <body>…</body> -->
<div class='rectangle'></div>
Raw
triangle.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment