使用边框半径填充日期元素

Question

目前使用bootstrap datepicker与范围windows.My任务是填充所选范围内的所有日期。一切正常，但我有这个问题：

我的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的{​​{1}}和background-color，但border-radius仅应用于一个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;
}