Skip to content

Instantly share code, notes, and snippets.

@kizu

kizu/dabblet.css

Forked from i2r/dabblet.css
Created June 11, 2014 09:36
Show Gist options
  • Save kizu/1dfae53269aa0c350077 to your computer and use it in GitHub Desktop.
Save kizu/1dfae53269aa0c350077 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;
//background: lime;
}
.arrow {
display: inline-block;
position: relative;
overflow: hidden;
width: 52px;
height: 32px;
padding-right: 20px;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 9px;
background:
linear-gradient(90deg, #fff, #fff)
no-repeat padding-box,
linear-gradient(90deg, #fc0 50%, orange 100%) border-box;
border: 2px solid rgba(0,0,0, 0);
border-right: 0;
}
.arrow:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: -17px;
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">asd</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