Skip to content

Instantly share code, notes, and snippets.

@possiblywrong

possiblywrong/dabblet.css

Created February 3, 2013 05:50
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 possiblywrong/4700675 to your computer and use it in GitHub Desktop.
Save possiblywrong/4700675 to your computer and use it in GitHub Desktop.
Download ZIP
Nested div masked off by circular container div (SO)
Raw
dabblet.css
/**
* Nested div masked off by circular container div (SO)
* http://stackoverflow.com/q/12964400/1397351
*/
#nav{
width: 100%;
height: 2em;
}
.aaa{
height: 2em;
border: 0px solid gray;
float: left;
position: relative;
}
.point {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
background-color:silver;
width:2em;
height:2em;
top: -0.04em;
left: -1em;
position:relative;
-moz-border-radius: 5px;
border-top-right-radius: 0.3em;
border-right: 1px solid black;
border-top: 1px solid black;
}
.ctnt {
height: 2em;
background-color: silver;
float: left;
padding-left: 2em;
position: relative;
line-height: 2em;
}
.outer {
width: 2em;
height: 2em;
overflow: hidden;
float: left;
position: relative;
}
.aaa:hover *:not(.outer) {
background-color:red;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="nav">
<div class="aaa" style="z-index:10;">
<div class="ctnt" style="z-index:10; padding-left: 0.8em;"><a href="#">Crumb</a></div>
<div class="outer" style="z-index:10;">
<div class="point" style="z-index:10;">&nbsp;</div>
</div>
</div>
<div class="aaa" style="z-index:1; left: -2em;">
<div class="ctnt" style="z-index:1;"><a href="#">Crumb2sdkjansdgasdgnasdgnasdg</a></div>
<div class="outer" style="z-index:1;">
<div class="point" style="z-index:1;">&nbsp;</div>
</div>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment