Skip to content

Instantly share code, notes, and snippets.

@i2r

i2r/dabblet.css

Created June 11, 2014 09:23
Show Gist options
  • Save i2r/2947082b0a71be4e4112 to your computer and use it in GitHub Desktop.
Save i2r/2947082b0a71be4e4112 to your computer and use it in GitHub Desktop.
Download ZIP
Bordered Arrow
Raw
dabblet.css
/**
* Bordered Arrow
*/
body {
min-height: 100%;
font-size: 10px;
}
.arrow {
position: absolute;
width: 50px;
height: 28px;
background:
linear-gradient(90deg, #fff, #fff)
no-repeat padding-box,
linear-gradient(90deg, #fc0 50%, orange 100%) border-box;
//box-sizing: border-box;
border: 2px solid rgba(0,0,0, 0);
border-right: 0;
clip: rect(0,9999px,auto,auto);
}
.arrow:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 20px;
height: 20px;
background-color: red;
background:
linear-gradient(45deg, #fff 50%, rgba(0,0,0, 0) 50%)
no-repeat padding-box,
linear-gradient(45deg, red, orange 50%, rgba(0,0,0, 0) 50%) border-box;
//box-sizing: border-box;
border: 3px solid rgba(0,0,0, 0);
transform: translate(-50%, -50%) scale(0.5, 1) rotate(-135deg)
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="arrow"></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment