Элемент даты заполнения с радиусом границы

Question

В настоящее время работает с bootstrap datepicker с диапазоном окон. Моя задача - заполнить все даты в выбранном диапазоне. Все работает нормально, но у меня есть эта проблема:

Мои CSS классы:

.selected-date-picker-range{ 
    background-color: #0eabec!important; 
    background-image:none!important; 
    border-radius: 0!important; 
} 

.selected-start-position-date-picker { 
    background-color: #2c7594!important; 
    background-image: none!important; 
    border-radius: 50%!important; 
} 

.selected-end-position-date-picker { 
    background-color: #2c7594!important; 
    background-image: none!important; 
    border-radius: 50%!important; 
} 

Как я могу заполнить белые угловые пространства в активных кнопок? Результат должен быть, как это:

Я попробовал этот код:

border-radius: 25% 0 0 25%!important; 

Но это выглядит не так хорошо. Может быть, у кого-то есть представление об этом. Спасибо за внимание.

Answer 1

Это jsfiddle показывает возможное решение: https://jsfiddle.net/fnrfa9n7/3/

Хитрость заключается в том, чтобы добавить псевдо-элемент selected-start-position-date-picker и selected-end-position-date-picker, который имеет один и тот же background-color как selected-date-picker-range класса, но границы радиуса применяется только к одной стороне его и z-index-1, чтобы переместить его за круглый родитель.

Тогда псевдоэлемент абсолютно позиционируется в относительно позиционированном родителе, так что ширина и высота могут составлять 100% от родительского.

.selected-start-position-date-picker, 
.selected-end-position-date-picker { 
    position: relative; 
} 

.selected-start-position-date-picker:after, 
.selected-end-position-date-picker:after { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
    background-color: #0eabec; 
} 

.selected-start-position-date-picker:after { 
    border-radius: 50% 0 0 50%; 
} 

.selected-end-position-date-picker:after { 
    border-radius: 0 50% 50% 0; 
}