Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created June 16, 2013 22:00
Show Gist options
  • Save anonymous/5793599 to your computer and use it in GitHub Desktop.
Save anonymous/5793599 to your computer and use it in GitHub Desktop.
Download ZIP
A triangle.
Raw
dabblet.css
/**
* A triangle.
*/
html { height: 100% }
body{ background-image: linear-gradient(to bottom left, grey, black);
text-align: center;}
.triangle {
background-image: linear-gradient(rgba(0, 0, 0,0.5), rgba(0, 0, 0, 1)) ;
color: lightblue;
display: inline-block;
line-height: 2em;
padding: 0 0.5em;
border-width: 0.5em;
border-style: solid;
border-color: lightblue;
border-radius: 0.5em;
position: relative;
}
.triangle:before,
.triangle:after {
content: "";
display: block;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-style: solid;
overflow: hidden;
height: 0;
width: 0;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%,100%);
}
.triangle:before {
border-top-color: lightblue;
border-width: 1em;
margin-bottom: -0.495em;
}
.triangle:after {
border-top-color: rgba(0, 0, 0, 1);
border-width: 0.75em;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="triangle" contenteditable="true"><strong>Une info bulle</strong><br/>avec un dégradé.<br />La taille est automatique; vous pouvez également édité ce texte!</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment