How to divide circle border to five parts

Question

I use below code for divide circle border to three parts, which degree should I use for dividing to five parts?

.step {
        height: 52px;
        width: 52px;
        border-radius: 50%;
        background: #eb4034;
        position: absolute;
    }

    .step:after {
        position: absolute;
        content: '';
        height: calc(100% - 10px);
        width: calc(100% - 10px);
        top: 0px;
        left: 0px;
        padding: 5px;
        border-radius: inherit;
        background-color: #ffffff;
        background-clip: content-box;
    }
    
    .one {
        background-image: linear-gradient(210deg, transparent 50%, #dbd7d7 50%), linear-gradient(90deg, #dbd7d7 50%, transparent 50%);
    }

    .two {
        background-image: linear-gradient(90deg, transparent 50%, #eb4034 50%), linear-gradient(144deg, #dbd7d7 50%, transparent 50%);
    }
    
    .three{
    background-image: linear-gradient(180deg, transparent 50%, #eb4034 50%), linear-gradient(180deg, #eb4034 50%, transparent 50%);
    }

<div class="step one"></div>
<br/><br/><br/><br/><br/>
<div class="step two"></div>
<br/><br/><br/><br/><br/>
<div class="step three"></div>

why don't you just add 2 more *div*s and adjust the CSS (linear-gradient degrees) accordingly so the degrees match for 5 parts instead of 3? — vsync, Jun 29 '21 at 16:59
@vsync I don't know which degrees should I use ! I tried different degrees but not work properly! — SajjadZare, Jun 29 '21 at 17:09
Honestly, an SVG is much simpler https://codepen.io/Paulie-D/pen/yLgzpXm — Paulie_D, Jun 29 '21 at 17:37

Aaron Stein · Accepted Answer · 2021-06-30T13:27:44.150

There are many ways to construct such a linear-gradient circle. To achieve your goal you have to first understand how stacking gradients work. Take a look here: https://css-tricks.com/stacking-order-of-multiple-backgrounds/ (TL;DR: "the last element will be on top, not the first")

After that you can just construct your circle. In your case your background is red, which makes it a bit confusing. See my example, I think the first two circles are trivial. But in the third and fourth we are adding another red part, rotated the exact amount(Try to figure out the math, one part is 72deg). I recommend using some dev-tools, where you can adjust the degrees with a slider.

.step {
  height: 52px;
  width: 52px;
  border-radius: 50%;
  background: #eb4034;
  position: relative;
  margin-bottom: 1rem;
}

.step:after {
  position: absolute;
  content: '';
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  top: 0px;
  left: 0px;
  padding: 5px;
  border-radius: inherit;
  background-color: #ffffff;
  background-clip: content-box;
}

.one {
  background-image: linear-gradient(0deg, transparent 50%, #dbd7d7 50%), linear-gradient(-108deg, transparent 50%, #dbd7d7 50%);
}

.two {
  background-image: linear-gradient(0deg, transparent 50%, #dbd7d7 50%), linear-gradient(-36deg, transparent 50%, #dbd7d7 50%)
}

.three {
  background-image: linear-gradient(216deg, transparent 50%, #eb4034 50%), linear-gradient(0deg, transparent 50%, #dbd7d7 50%);
}

.four {
  background-image: linear-gradient(288deg, transparent 50%, #eb4034 50%), linear-gradient(0deg, transparent 50%, #dbd7d7 50%);
}

<div class="step one"></div>
<div class="step two"></div>
<div class="step three"></div>
<div class="step four"></div>
<div class="step"></div>

You don't have a `five` class in your *css*, yet you use it in the HTML — vsync, Jun 29 '21 at 18:17

How to divide circle border to five parts

1 Answers1