Skip to content

Instantly share code, notes, and snippets.

@enriclluelles

enriclluelles/dabblet.css

Created September 4, 2013 15:14
Show Gist options
  • Save enriclluelles/6438416 to your computer and use it in GitHub Desktop.
Save enriclluelles/6438416 to your computer and use it in GitHub Desktop.
Download ZIP
Rounded arrows with CSS (SO)
Raw
dabblet.css
/**
* Rounded arrows with CSS (SO)
* http://stackoverflow.com/questions/12461441/rounded-arrows-with-css/12461582#12461582
*/
body {
padding-top: 5em;
background: linear-gradient(left, plum 50%, transparent 50%);
background-size: 5.1em 1px
}
.arrow {
width: 7em;
height: 7em;
border-radius: 0 0 2em 0;
margin: -2em 2.5em;
transform: rotate(45deg);
background: linear-gradient(-45deg, black 50%, transparent 50%);
}
.arrow:nth-child(1) {transform: rotate(45deg) skewX(5deg) skewY(5deg);}
.arrow:nth-child(3) {transform: rotate(45deg) skewX(-5deg) skewY(-5deg);}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='arrow'></div>
<div class='arrow'></div>
<div class='arrow'></div>
Raw
settings.json
{"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