title: css3 and a way to color a span as a circle with a different half as background
body: <p>so, I have some html layout and I cannot change the html, ONLY the css. Now, I can achieve the colors I want and create that circle (see image), with border-radius. Here is the rub, each square is a span. There are no inner divs/outer divs.. just the span. Is there a way to achieve, with css, that circle and then the half background fill. </p>
  
  <p>the code would be, on a base level:</p>
  
  <pre><code>&lt;span class="day is-range is-selected" /&gt;22&lt;/span&gt;
  &lt;span class="day is-range" /&gt;23&lt;/span&gt;
  </code></pre>
  
  <p>Basically, when a user selects a date, I color it that bright reddish color, make it a circle, make the other dates backgrounds that more bourbon red color.. great... BUT the selected date with the cirle doesn't have that "bleed into" the other square look with half its span colored. Is there a way to achieve this with css and no mods to the html?</p>
  
  <p>I've only been able to achieve the following:</p>
  
  <p><a href="https://i.stack.imgur.com/hX98m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hX98m.png" alt="What I have"></a></p>
  
  <p>What I want to achieve.</p>
  
  <p><a href="https://i.stack.imgur.com/J49Hl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J49Hl.png" alt="What I want to achieve"></a></p>
  
  <p>This is really what I am trying to achieve. The span, goes to a circle, I can do that - but somehow make half of the span have a different background color.</p>
  
  <p><a href="https://i.stack.imgur.com/0agLH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0agLH.png" alt="enter image description here"></a></p>
  
  <p>The CSS I am using is fairly trivial. Note, I have to use !important to override what is gen'ed.</p>
  
  <pre><code>  .is-selected {
      background-color: @selected-background !important;
      color: @base;
      border-radius: 20px;
    }
  
  
  
    .is-inRange {
      background-color: @active-background !important;
      color: @base;
    }
  </code></pre>