Skip to content

Instantly share code, notes, and snippets.

@anami

anami/dabblet.css

Last active September 3, 2015 10:19
Show Gist options
  • Save anami/36cb85a999a8ca20ea81 to your computer and use it in GitHub Desktop.
Save anami/36cb85a999a8ca20ea81 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
/*background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;*/
html {
font: 12pt "Monaco";
}
.arrow-container {
position: relative;
}
.arrow {
display: inline-block;
margin: 10px;
}
.arrow:after, .arrow:before {
content: " ";
width:0;
height:0;
border-color: transparent;
border-style: solid;
}
.arrow.up:after {
border-width: 40px;
border-bottom-color: #f06;
position: relative;
top: -30px;
}
.arrow.down:after {
border-width: 40px;
border-top-color: #f06;
position: relative;
top: 40px;
}
.arrow.left:after {
border-width: 40px;
border-right-color: #f06;
position: absolute;
left: 200px;
top: -20px;
}
.arrow.right:after {
border-width: 40px;
border-left-color: #f06;
position: absolute;
left: 300px;
top: -20px;
}
.arrow.down.outline:before {
border-width: 40px;
border-top-color: #f06;
position: relative;
top: 61px;
left: 100px;
}
.arrow.down.outline:after {
border-width: 40px;
border-top-color: white;
position: relative;
top: 50px;
left: 20px;
}
.pink-line {
display: block;
border-bottom: solid 8px #f06;
width: 500px;
margin-top: 50px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<p>
Using the :after pseudo element - with 0 width and height. The "arrow" part is made up of the border.
</p>
<div class="arrow up"></div>
<p>
This is achieved by setting the border to transparent but only setting the bottom border to pink.
</p>
<div class="arrow-container">
<div class="arrow down"></div>
<div class="arrow left"></div>
<div class="arrow right"></div>
</div>
<p>
Now add a div with a bottom border of the same colour - the line can have a "trough"
</p>
<div class="arrow down outline"></div>
<div class="pink-line arrow down outline"></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment