css3 i sposób na kolor rozpiętości jako koło o innej połowie jako tło - css, css3, mniej

więc mam jakiś układ html i nie mogę się zmienićhtml, TYLKO css. Teraz mogę osiągnąć żądane kolory i utworzyć ten okrąg (patrz zdjęcie), z promieniem granicznym. Oto pocieranie, każdy kwadrat jest przęsłem. Nie ma wewnętrznych div / div zewnętrznych ... tylko rozpiętość. Czy istnieje sposób na osiągnięcie, przy pomocy css, tego okręgu, a następnie wypełnienia połowy tła.

kod byłby na poziomie podstawowym:

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

Zasadniczo, gdy użytkownik wybiera datę, koloruję jąten jasny czerwonawy kolor, sprawia, że ​​jest to okrąg, sprawia, że ​​inne daty tła, które bardziej czerwony kolor burbonu .. świetnie ... ALE wybrana data z cyrkiem nie ma „krwawienia” do drugiego kwadratu o połowie jego rozpiętości kolorowy Czy istnieje sposób na osiągnięcie tego za pomocą css i żadnych modów do HTML?

Udało mi się tylko osiągnąć:

Co chcę osiągnąć.

To jest naprawdę to, co próbuję osiągnąć. Przęsło idzie do kręgu, mogę to zrobić - ale jakoś zrobić, aby połowa zakresu miała inny kolor tła.

CSS, którego używam, jest dość trywialny. Uwaga, muszę użyć! Ważne, aby zastąpić to, co jest genem ”.

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



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

Odpowiedzi:

Pseudoelement wydaje się jedyną opcją, ponieważ HTML nie może zostać zmieniony.

Specyficzność była jednak zarządzana:

	.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>

Jeśli oba dni są w jednym rzędzie:

.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>