Работа с css перед селектором

Question

Я пытаюсь наложить одно изображение поверх другого и сделать круговое изображение из них.

<span onclick="someFunction()" id="swatch_123456" class="slider-color-swatches" style="background-image: url(anyImage.png);"></span> 

.slider-color-swatches{ 
    position: relative; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: inline-block; 
    vertical-align: top; 
    overflow: hidden; 
    margin-bottom: 10px; 
    margin-right: 10px; 
} 
.slider-color-swatches::before{ 
    content: ''; 
    position: absolute; 
    background-image: url('anyOtherIamge.pnenter image description hereg'); 
    left: 20%; 
    width: 100%; 
    height: 200%; 
    top: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

Here are the images as to what I want to do and where Iam able to get so far

Answer 1

попробовать это .. может быть обработан ..

{ 
    width: 28px; 
    height: 28px; 
    overflow: hidden; 
    display: block; 
    border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    margin-bottom: 10px; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    margin: 0 auto; 
} 

Answer 2

Попробуйте добавить display: block; к вашему ::before элементу. Выполнение этого приведет к изменению вашей ширины и высоты.

Кроме того, добавление margin: auto; будет поддерживать его в центре.

Пример:

.slider-color-swatches::before { 
    content: ''; 
    position: absolute; 
    display: block; 
    margin: auto; 
    background-image: url('anyOtherIamge.pnenter image description hereg'); 
    left: 20%; 
    width: 100%; 
    height: 200%; 
    top: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); } 

Если вы хотите попробовать другой метод, взгляните на clipping and masking!