css3 и начин за оцветяване на диапазон като кръг с различна половина като фон - css, css3, less

така че имам някои 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>