Объединение элементов CSS в один элемент

Question

Я пытаюсь создать очень конкретное изображение с использованием CSS (если нет лучшего способа сделать это, что я еще не обнаружил). Я создал изображение с помощью Photoshop, но разрешение не такое высокое, как я хочу. Ниже приведен код и результат. Однако я хочу объединить все три стиля CSS в один, чтобы каждый раз, когда я хочу показывать изображение, мне не нужно рисовать каждый из трех кругов. Любое понимание было бы замечательным или лучшей идеей для достижения того же самого.

#box { 
 
    display: block; 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    background-color: #74afad; 
 
    position: absolute; 
 
    border-radius: 100%; 
 
    z-index: -1; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
    vertical-align: middle; 
 
} 
 
#whiteCircle { 
 
    display: block; 
 
    width: 1.25em; 
 
    height: 1.25em; 
 
    background-color: white; 
 
    position: relative; 
 
    border-radius: 100%; 
 
    z-index: 0; 
 
    margin-top: 50%; 
 
    top: -.625em; 
 
    margin-left: 50%; 
 
    left: -.625em; 
 
    vertical-align: middle; 
 
} 
 
#orangeCircle { 
 
    display: block; 
 
    width: 1em; 
 
    height: 1em; 
 
    background-color: #ff7e00; 
 
    position: absolute; 
 
    border-radius: 100%; 
 
    z-index: 1; 
 
    margin-top: 50%; 
 
    margin-left: 50%; 
 
    top: -.5em; 
 
    left: -.5em; 
 
    vertical-align: middle; 
 
}

<div id="box"> 
 
    <div id="whiteCircle"> 
 
    <div id="orangeCircle"> 
 
    </div> 
 
    </div> 
 
</div>

Спасибо!

Answer 1

Вы можете свернуть все до одного класса CSS, используя псевдоэлементы вместо явных тегов div.

Вместо использования селектора id используйте класс (.box вместо #box), а затем вы можете безопасно повторно использовать класс на своих страницах.

#box { 
 
    display: block; 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    background-color: #74afad; 
 
    position: absolute; 
 
    border-radius: 100%; 
 
    z-index: -1; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
    vertical-align: middle; 
 
} 
 
#box:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 1.25em; 
 
    height: 1.25em; 
 
    background-color: white; 
 
    position: relative; 
 
    border-radius: 100%; 
 
    z-index: 0; 
 
    margin-top: 50%; 
 
    top: -.625em; 
 
    margin-left: 50%; 
 
    left: -.625em; 
 
    vertical-align: middle; 
 
} 
 
#box:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 1em; 
 
    height: 1em; 
 
    background-color: #ff7e00; 
 
    position: absolute; 
 
    border-radius: 100%; 
 
    z-index: 1; 
 
    margin-top: 50%; 
 
    margin-left: 50%; 
 
    top: -.5em; 
 
    left: -.5em; 
 
    vertical-align: middle; 
 
}

<div id="box"></div>

Answer 2

попробуйте использовать градиенты

<style type="text/css"> 

.circle{ 
width: 1.5em; 
height: 1.5em; 
border-radius: 50%; 
background: -moz-radial-gradient(center, ellipse cover, #ff7e00 0%, #ff7e00 45%, #ffffff 45%, #ffffff 58%, #74afad 58%, #74afad 100%); /* FF3.6+ */ 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ff7e00), color-stop(45%,#ff7e00), color-stop(45%,#ffffff), color-stop(58%,#ffffff), color-stop(58%,#74afad), color-stop(100%,#74afad)); /* Chrome,Safari4+ */ 
background: -webkit-radial-gradient(center, ellipse cover, #ff7e00 0%,#ff7e00 45%,#ffffff 45%,#ffffff 58%,#74afad 58%,#74afad 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-radial-gradient(center, ellipse cover, #ff7e00 0%,#ff7e00 45%,#ffffff 45%,#ffffff 58%,#74afad 58%,#74afad 100%); /* Opera 12+ */ 
background: -ms-radial-gradient(center, ellipse cover, #ff7e00 0%,#ff7e00 45%,#ffffff 45%,#ffffff 58%,#74afad 58%,#74afad 100%); /* IE10+ */ 
background: radial-gradient(ellipse at center, #ff7e00 0%,#ff7e00 45%,#ffffff 45%,#ffffff 58%,#74afad 58%,#74afad 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7e00', endColorstr='#74afad',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 

} 

</style> 


<div class="circle"></div>