public
Last active — forked from thebabydino/dabblet.css

Nested div masked off by circular container div (SO)

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
/**
* 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;
}
dabblet.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<!-- 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>
settings.json
JSON
1
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.