Hey there! I've come across a little challenge with an HTML layout - the tricky part is that I can only tweak the CSS, not the actual HTML structure itself. The goal is to create a circular design (like the one shown in the image) using the border-radius property. Here's where things get interesting: each square is represented by a span element, with no divs inside or outside. So, my question is, is there a way to use CSS to achieve that circular design with a half background fill effect?
Here's a basic representation of the code:
<span class="day is-range is-selected" />22</span>
<span class="day is-range" />23</span>
Essentially, I want to color the selected date in a bright reddish shade and give it a circular shape, while the other dates should have a different, more bourbon red color as their background. However, I'm struggling to create that bleed effect where half of the selected date's span has a different background color. Is there a CSS solution for this without modifying the HTML structure?
So far, I've only been able to achieve something like this:
https://i.sstatic.net/hX98m.png
But what I really want to achieve is this:
https://i.sstatic.net/J49Hl.png
That's the effect I'm aiming for - a circular span with half of it having a different background color.
https://i.sstatic.net/0agLH.png
The CSS code I'm currently using is pretty basic. Just a heads-up, I've had to use !important to override the default styles.
.is-selected {
background-color: @selected-background !important;
color: @base;
border-radius: 20px;
}
.is-inRange {
background-color: @active-background !important;
color: @base;
}