StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Update: CSS3 Radial Background Gradient Option</h2> <p>(For those browsers supporting it--tested in FF and Chrome--IE10, Safari should work too).</p> <p>One "problem" with my original answer is those situations where one does not have a solid background that they are working against. This update creates the same effect allowing for a transparent "gap" between the circle and it's inverse cutout. </p> <h2><a href="http://jsfiddle.net/PG4pM/74/" rel="noreferrer">See example fiddle</a>.</h2> <p><strong>CSS</strong></p> <pre class="lang-css prettyprint-override"><code>.inversePair { border: 1px solid black; display: inline-block; position: relative; height: 100px; text-align: center; line-height: 100px; vertical-align: middle; } #a { width: 100px; border-radius: 50px; background: grey; z-index: 1; } #b { width: 200px; /* need to play with margin/padding adjustment based on your desired "gap" */ padding-left: 30px; margin-left: -30px; /* real borders */ border-left: none; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; /* the inverse circle "cut" */ background-image: -moz-radial-gradient( -23px 50%, /* the -23px left position varies by your "gap" */ circle closest-corner, /* keep radius to half height */ transparent 0, /* transparent at center */ transparent 55px, /*transparent at edge of gap */ black 56px, /* start circle "border" */ grey 57px /* end circle border and begin color of rest of background */ ); background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px); background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px); background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px); background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px); } </code></pre> <h2>Original Answer</h2> <p>Took more effort than I expected to get the z-indexing to work (<a href="http://jsfiddle.net/PG4pM/31/" rel="noreferrer">this seems to ignore the negative z-index</a>), however, <a href="http://jsfiddle.net/PG4pM/32/" rel="noreferrer"><strong>this gives a nice clean look</strong></a> (tested in IE9, FF, Chrome):</p> <p><strong>HTML</strong></p> <pre><code><div id="a" class="inversePair">A</div> <div id="b" class="inversePair">B</div> </code></pre> <p><strong>CSS</strong></p> <pre class="lang-css prettyprint-override"><code>.inversePair { border: 1px solid black; background: grey; display: inline-block; position: relative; height: 100px; text-align: center; line-height: 100px; vertical-align: middle; } #a { width: 100px; border-radius: 50px; } #a:before { content:' '; left: -6px; top: -6px; position: absolute; z-index: -1; width: 112px; /* 5px gap */ height: 112px; border-radius: 56px; background-color: white; } #b { width: 200px; z-index: -2; padding-left: 50px; margin-left: -55px; overflow: hidden; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } #b:before { content:' '; left: -58px; top: -7px; position: absolute; width: 114px; /* 5px gap, 1px border */ height: 114px; border-radius: 57px; background-color: black; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload