CSS 3 Shape: "Reverse Circle" or "Hollow Circle"

Question

CSS 3 Shape: "Reverse Circle" or "Hollow Circle"

Trying to create an inverse circle or cut-out circle in CSS has been a challenging task for me. I stumbled upon this insightful answer provided by ScottS.

While Scott's code worked like a charm, I am now aiming to achieve a similar effect on the opposite side of the <div> element. Instead of having a cut-out on the left, my goal is to have it on the right.

Below is the existing code:

body {
  padding: 10px;
  background: url(http://www.dummyimage.com/12x16/ff0000/ffffff.png&text=X++) top left repeat;
}

.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);
}

<div id="a" class="inversePair">A</div>
<div id="b" class="inversePair">B</div>

I'm on a quest to mirror this effect. How should I proceed?

css

Answer 1

Answer №1

Here is a unique solution for your alignment needs:

body {
  padding: 10px;
  background: url(http://www.dummyimage.com/12x16/ff0000/ffffff.png&text=X++) top left repeat;
}
.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
}
#b {
  width: 200px;
  border-right: none;
}

<div id="b" class="inversePair">B</div>
<div id="a" class="inversePair">A</div>

If you're looking for a more optimized version of the original answer, check out this JSFiddle link:

body {
  padding: 10px;
}

#a, #b {
  border: 1px solid black;
  display: inline-block;
  height: 100px;
  line-height: 100px;
}

#a {
  background: grey;
  border-radius: 50%;
  width: 100px;
}
#b { 
  width: 200px;
  margin: 0 -20px 0 0;
  padding: 0 40px 0 0;
  border-radius: 20px 0 0 20px;
  border-width: 1px 0 1px 1px;
}

<div id="b">B</div>
<div id="a">A</div>

For another simple alignment option, try this JSFiddle demo:

body {
  padding: 10px;
}

#a, #b {
  border: 1px solid black;
  display: inline-block;
  height: 100px;
  line-height: 100px;
}

.item-align-left, .item-align-right {
  display: flex;
  margin-bottom: 10px;
}
.item-align-left #a, .item-align-right #b { 
  order: 1;
}
.item-align-right #a, .item-align-left #b {
  order: 2;
}

#a {
  background: grey;
  border-radius: 50%;
  width: 100px;
}
#b {
  width: 200px;
}
.item-align-right #b {
  margin: 0 -20px 0 0;
  padding: 0 40px 0 0;
  border-radius: 20px 0 0 20px;
  border-width: 1px 0 1px 1px;
}
.item-align-left #b {
  margin: 0 0 0 -20px;
  padding: 0 0 0 40px;
  border-radius: 0 20px 20px 0;
  border-width: 1px 1px 1px 0;
}

<div class="item-align-right">
  <div id="a">A</div>
  <div id="b">B</div>
</div>
<div class="item-align-left">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

Answer 2

Here is a unique solution for your alignment needs:

body {
  padding: 10px;
  background: url(http://www.dummyimage.com/12x16/ff0000/ffffff.png&text=X++) top left repeat;
}
.inversePair {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  height: 100px;
  text-align: center;
}

#a {
  width: 100px;
  border-radius: 50px;
  background: grey;
}
#b {
  width: 200px;
  border-right: none;
}

<div id="b" class="inversePair">B</div>
<div id="a" class="inversePair">A</div>

If you're looking for a more optimized version of the original answer, check out this JSFiddle link:

body {
  padding: 10px;
}

#a, #b {
  border: 1px solid black;
  display: inline-block;
  height: 100px;
  line-height: 100px;
}

#a {
  background: grey;
  border-radius: 50%;
  width: 100px;
}
#b { 
  width: 200px;
  margin: 0 -20px 0 0;
  padding: 0 40px 0 0;
  border-radius: 20px 0 0 20px;
  border-width: 1px 0 1px 1px;
}

<div id="b">B</div>
<div id="a">A</div>

For another simple alignment option, try this JSFiddle demo:

body {
  padding: 10px;
}

#a, #b {
  border: 1px solid black;
  display: inline-block;
  height: 100px;
  line-height: 100px;
}

.item-align-left, .item-align-right {
  display: flex;
  margin-bottom: 10px;
}
.item-align-left #a, .item-align-right #b { 
  order: 1;
}
.item-align-right #a, .item-align-left #b {
  order: 2;
}

#a {
  background: grey;
  border-radius: 50%;
  width: 100px;
}
#b {
  width: 200px;
}
.item-align-right #b {
  margin: 0 -20px 0 0;
  padding: 0 40px 0 0;
  border-radius: 20px 0 0 20px;
  border-width: 1px 0 1px 1px;
}
.item-align-left #b {
  margin: 0 0 0 -20px;
  padding: 0 0 0 40px;
  border-radius: 0 20px 20px 0;
  border-width: 1px 1px 1px 0;
}

<div class="item-align-right">
  <div id="a">A</div>
  <div id="b">B</div>
</div>
<div class="item-align-left">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

CSS 3 Shape: "Reverse Circle" or "Hollow Circle"

Answer №1

Similar questions

The CSS styling for a pie chart does not seem to be functioning properly when using jQuery's

What are the steps to recreate the layout of my image using HTML?

Utilizing Stylus: Embracing Interpolation within a Mixin

What steps can I take to create a textbox that expands as more text is

Stop child elements from spilling out of the parent container without using fixed height measurements

Troubleshooting Problem with CSS Display in Spring Security 3.2

Issues with Animations in Animate.css

Using PHP to create multiple div elements and then concealing them all

Issue with automatic compiling in Sublime 2 for less2css

"My attempts to link various buttons in separate Bootstrap modals to their specific content are not yielding successful results

I am in need of assistance with my request for two rows of three images to be solved

What causes the disparity in functionality between simple html and css in an Angular 2 project compared to a vanilla html website?

Safari not centering element with justify-self in CSS grid

Is it possible to still alter options in a read-only Select component in Twitter Bootstrap

Verify whether the content within the Div has been modified

Having trouble getting the carousel slider to function properly on meteor?

Is there a way to potentially utilize window.open() to open a specific section of a webpage?

Tips for customizing the selection tip of a custom cursor using CSS

Icons on Google Calendar events - Mini images beside your schedule

Ways to eliminate the dotted line from the image map in Internet Explorer 11