Search code examples
csscss-shapes

CSS circle with inlay border

I'm trying to create a circle in CSS with an inlay border as per the below sample:

inlay circle

I have the following HTML and CSS, but it's not producing the effect that I need:

.inlay-circle {
  width: 15rem;
  height: 15rem;
  border: solid #a7a9ac 2px;
  border-radius: 50%;
}
.inlay-circle:before {
  top: 0.7rem;
  left: 0.5rem;
  position: absolute;
  content: '';
  width: 15rem;
  height: 15rem;
  border-right: solid #658d1b 0.6rem;
  border-radius: 50%;
  transform: rotate(45deg);
}
<div class="inlay-circle"></div>

Any help on getting the inlay squared and adding the spacing between the inlay and the main circle would be highly appreciated.

Solution

  • First off, I've changed dimensions to pixels as it was easier to work with just one unit, but you can of course change this back. So I made the green border 10px thick.

    You need 3 circle sections to achieve this. One for the gray circle, one for the green quarter and one to achieve the gap between the two visible parts. The gap may be achievable using other methods that I can't think of right away.

    First, I moved the green border to the ::after pseudo-selector, so I could put something underneath it to create the gap (the ::before pseudo-selector)

    Secondly, to avoid the growing/shrinking effect your green border has, you need to give the whole green circle the same size (at least the parts that are next to the border-right, i.e. border-top and border-bottom). This can be done by adding a 10px transparent border:

    border: solid transparent 10px;

    To compensate for the whole box with the green border growing as a result of this, I added negative margins on the left/top.

    For the gap, a second circle is created. This one has a white border. This means it won't work against any other background (but you can change the color of this border to match the background). It's a bit bigger and moved further left/top so that it's positioned appropriately.

    .inlay-circle {
  width: 15rem;
  height: 15rem;
  border: solid #a7a9ac 2px;
  border-radius: 50%;
}
.inlay-circle::after {
  margin-left: -15px;
  margin-top: -15px;
  position: absolute;
  content: '';
  width: 15rem;
  height: 15rem;
  border: solid transparent 10px;
  border-right: solid #658d1b 10px;
  border-radius: 50%;
  transform: rotate(45deg);

}
.inlay-circle::before {
  margin-left: -30px;
  margin-top: -30px;
  position: absolute;
  content: '';
  width: 15rem;
  height: 15rem;
  border: solid transparent 20px;
  border-right: solid white 20px;
  border-radius: 50%;
  transform: rotate(45deg);
}
    <div class="inlay-circle"></div>