Skip to content

@possiblywrong /dabblet.css forked from thebabydino/dabblet.css
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Nested div masked off by circular container div (SO)
/**
* 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;
}
<!-- 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>
{"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
Something went wrong with that request. Please try again.