css3 і спосіб кольорового розмаху як кола з іншою половиною як фон - css, css3, менше

так, у мене є HTML-макет, і я не можу змінитиhtml, ТІЛЬКИ css. Тепер я можу досягти бажаних кольорів і створити це коло (див. Зображення), з радіусом кордону. Ось руб, кожен квадрат є проліт. Немає внутрішніх divs / зовнішніх divs .. тільки проліт. Чи є спосіб досягти, з css, що коло, а потім наполовину фонової заливки.

код буде на базовому рівні:

<span class="day is-range is-selected" />22</span>
<span class="day is-range" />23</span>

В основному, коли користувач вибирає дату, я її фарбующо яскраво-червонуватого кольору, зробити його коло, зробити інші фони дат, що більше бурбон червоний колір .. великий ... АЛЕ обрана дата з cirle не має, що "кровоточити в" інший квадратний погляд з половиною його проліт \ t Чи є спосіб досягти цього з css і без модів в html?

Мені вдалося досягти лише наступного:

Що я хочу досягти.

Це дійсно те, що я намагаюся досягти. Проліт, що йде в коло, я можу це зробити - але якимось чином зробіть половину прогону іншим кольором фону.

CSS, який я використовую, досить тривіальний. Зверніть увагу, я повинен використовувати! Важливо, щоб перевизначити те, що ген.

  .is-selected {
background-color: @selected-background !important;
color: @base;
border-radius: 20px;
}



.is-inRange {
background-color: @active-background !important;
color: @base;
}

Відповіді:

Псевдоелемент, здається, єдиним варіантом, оскільки HTML не може бути змінений.

Спеціальність можна управляти, хоча:

	.day {
float: left;
width: 40px;
height: 40px;
background: plum;
line-height: 40px;
text-align: center;
color: white;
}
.is-range {
background: plum;
}
.is-range.is-selected {
background-color: red;
border-radius: 50%;
position: relative;
}
.is-range.is-selected:after {
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
left: 50%;
background: plum;
z-index: -1;
}

<div>
<span class="day is-range is-selected">22</span>
<span class="day is-range">23</span>
<span class="day is-range">24</span>
<span class="day is-range">25</span>
</div>

.day {
float: left;
width: 3em;
height: 3em;
background: silver;
line-height: 3em;
text-align: center;
}

.is-selected {
background-color: red;
border-radius: 50%;
position: relative;
}

.is-selected:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
background: silver;
z-index: -1;
}

<span class="day is-range is-selected">22</span>
<span class="day is-range">23</span>

Якщо обидва дні знаходяться в одному рядку:

.day {
float: left;
width: 3em;
height: 3em;
background: silver;
line-height: 3em;
text-align: center;
}

.is-selected {
background-color: red;
border-radius: 50%;
position: relative;
}

.is-selected + .day {
margin-left: -1.5em;
padding-left: 1.5em;
}

<span class="day is-range is-selected">22</span>
<span class="day is-range">23</span>