css3 a spôsob, ako zafarbiť rozpätie ako kruh s inou polovicou ako pozadie - css, css3, menej

tak, mám nejaké html rozloženie a nemôžem zmeniťhtml, LEN css. Teraz môžem dosiahnuť farby, ktoré chcem, a vytvoriť tento kruh (pozri obrázok) s hraničným polomerom. Tu je rub, každý štvorec je rozpätie. Neexistujú žiadne vnútorné divs / vonkajšie divs .. len rozpätie. Existuje spôsob, ako dosiahnuť, s css, že kruh a potom polovica pozadia vyplniť.

kód by bol na základnej úrovni:

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

V podstate, keď používateľ vyberie dátum, vyfarbím ho, Že jasná červenkastá farba, aby bolo kruh, aby ostatné dátumy pozadia, ktoré viac bourbon červená farba .. skvelé ... ale vybraný dátum s cirle doesn "t mať, že" krvácať do "druhého námestia vzhľad s polovicou jeho rozpätie Existuje spôsob, ako to dosiahnuť pomocou css a bez modov do html?

Dosiahla som iba nasledujúce:

To, čo chcem dosiahnuť.

To je to, čo sa snažím dosiahnuť. Rozpätie, ide do kruhu, môžem to urobiť - ale nejaká polovica rozpätia má inú farbu pozadia.

CSS používam, je pomerne triviálne. Všimnite si, musím použiť! Dôležité na to, aby som nahradil to, čo je gen "ed.

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



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

odpovede:

Zdá sa, že pseudo-element je jediná možnosť, pretože HTML nie je možné zmeniť.

Špecifickosť sa však riadi:

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

Ak sú oba dni v jednom riadku:

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