Как разрезать круг на четыре равные части?

Question

Всем доброго времени суток как разрезать круг на четыре равные части в оригинале должно получиться так

Помогите пожалуйсто решить эту задачу

.cssload-container {
    width: 100%;
    height: 49px;
    text-align: center;
}

.cssload-speeding-wheel {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border: 4px double;
    border-radius: 50%;
    
 
  
   border-left-color: transparent;
  border-right-color: transparent;
    
    animation: cssload-spin 575ms infinite linear;
        -o-animation: cssload-spin 575ms infinite linear;
        -ms-animation: cssload-spin 575ms infinite linear;
        -webkit-animation: cssload-spin 575ms infinite linear;
        -moz-animation: cssload-spin 575ms infinite linear;
}



@keyframes cssload-spin {
    100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

@-o-keyframes cssload-spin {
    100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}

@-ms-keyframes cssload-spin {
    100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin {
    100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes cssload-spin {
    100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

<div class="cssload-container">
<div class="cssload-speeding-wheel"></div>
</div>

Answer 1

Если нужно просто визуальное разделение, то пример ниже. Если элементы круга нужны как отдельные блоки, то решение есть в подобном вопросе.

.cssload-container {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
}

.cssload-speeding-wheel {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border: 4px double;
    border-radius: 50%;
    position: relative;
}

.cssload-speeding-wheel:before,
.cssload-speeding-wheel:after{
  content: "";
  display: block;
  width: 6px;
  height: 150%;
  background: white;
  position: absolute;
  z-index:1;
  left: calc(50% - 3px);
  top: -25%;
}

.cssload-speeding-wheel:after {
 transform: rotate(90deg)
}

<div class="cssload-container">
<div class="cssload-speeding-wheel"></div>
</div>

БЛОГ НА HUSL

Как разрезать круг на четыре равные части?

Ответы (1 шт):