Skip to content

Instantly share code, notes, and snippets.

@geneparcellano

geneparcellano/dabblet.css

Last active December 3, 2020 22:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save geneparcellano/048b3e1aa5b921678439b1e38a05332e to your computer and use it in GitHub Desktop.
Save geneparcellano/048b3e1aa5b921678439b1e38a05332e to your computer and use it in GitHub Desktop.
Download ZIP
Tooltip w/ rounded corners arrow
Raw
dabblet.css
/**
* Tooltip w/ rounded corners arrow
*/
.tooltip {
position: relative;
width: 100px;
padding: 7px 10px;
background-color: black;
border-radius: 5px;
color: white;
}
.triangle {
display: block;
position: absolute;
top: 50%;
left: -6px;
margin-top: -9px;
background-color: black;
}
.triangle:before,
.triangle:after {
content: '';
position: absolute;
background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
width: 12px;
height: 12px;
border-top-right-radius: 5px;
}
.triangle {
transform: rotate(-30deg) skewX(-30deg) scale(1,.866);
}
.triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
/* styles below for demonstration purposes only */
body { padding: 30%; }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="tooltip">
Tooltip
<span class='triangle'></span>
</div><!-- content to be placed inside <body>…</body> -->
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","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