Using CSS3 to style a span element as a circular shape with one half displaying a distinct background color

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;
  }

Answer №1

Considering that the HTML structure cannot be modified, using a pseudo-element appears to be the most viable solution in this scenario.

It is crucial to handle the specificity in the following CSS code:

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

Answer №2

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

Answer №3

If both days are on the same line:

.day {
  display: inline-block;
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for adding a dark, semi-transparent overlay across the entire webpage?

Is it possible to overlay the entire webpage with a 50% opaque black div? I attempted to achieve this by creating a fixed position div at the top of the script with 100% width and height and a z-index of 1. However, this method prevents me from placing an ...

Cannot add padding to the DIV element

Here is some HTML and CSS code that I've provided. .x{ border-bottom: 1px solid #000; } .y { border-bottom: 1px solid #000; } .z li{ display: inline; padding-top: 50px; } <div class="x"> <br> <br> <b ...

Creating a unique post type in Wordpress

Currently, I am in the process of converting a Bootstrap one-page template into a WordPress template. My goal is to incorporate a custom post type that will display items in the services portfolio while maintaining the same CSS styling. Here is the code sn ...

Fluid Design - Extra Spacing at the Bottom with Percent Margin-Top

Currently, I am working on developing a website using only percentages. However, I have encountered an issue with my main content section. I have set a margin-top of 10%, but this is causing excessive spacing at the bottom of the page and resulting in a sc ...

The Mystery of jQuery Isotope Plugin: Why Can't I Add "display:none" Inline?

I'm currently in the process of integrating Isotope into my latest Wordpress theme. However, I've encountered an issue where it's not appearing on the page due to some external factor adding an inline style (display:none) to the main isotope ...

Remove the presence of a black square when selecting elements using CSS

Update: After some investigation, I discovered that the mysterious black square is actually a part of the scroll bar. By adding the following code snippet: select::-webkit-scrollbar { display: none; } The square no longer appears. Initially, my se ...

How can you change a particular inline style using the Firefox browser?

I am looking for a solution to override an inline style on a specific webpage within the Firefox browser without access to the source code. Previously, I would manually modify the page source using Firefox development tools. Specifically, I encounter a we ...

What is the best way to implement two distinct global CSS styles for separate pages in Next.js?

I'm looking to give my website a fresh look by creating two different global CSS styles. Is it possible to use one CSS style for the old pages and another for the new pages? ...

Using JS to switch between text and state in ToneJS

I am facing an issue with the text not displaying in the "play-stop-toggle" element, despite my limited experience with JS. My desired outcome includes: [SOLVED] The text in <div id="play-stop-toggle" onclick="togglePlay()">Play ...

Step-by-step guide on positioning a div below another div and centering both elements horizontally

Trying to center the "input" div below the "InputBelow" div using "flex-direction: column" is causing issues with "justify-content; center." The goal is to center the main "border" div in the middle of the screen and align the other elements inside it. ...

How can I eliminate a class when the scrollTop() position matches a specific div element?

I am trying to implement a script that will allow me to scroll to my navigation and then change the class of the navigation, however, it is not working as expected. $(window).scroll(function() { if ($(window).scrollTop == $('.menu_nav').offs ...

Issues with screen scrolling becoming stuck in React and Material UI

Currently facing an unusual issue where scrolling on my mobile website becomes sticky, with intermittent responsiveness to touch. Struggling to identify the root cause as there are no console errors detected. Provided below is a snippet of code for a subse ...

Header bar not extending across the entire width of the screen when viewed on mobile devices

View the problem screenshot hereWelcome to my first stackoverflow post, please be gentle if I make any mistakes. I'm currently working on a project for a course using Bootstrap 4. The issue I'm facing pertains to the navbar losing its full width ...

Can a specific input value be applied or utilized in any way?

I have limited coding experience, so please forgive me if this is a simple question. I am curious if it is possible to create a feature on a website where user input is utilized elsewhere. Specifically, I am looking to have an input box where a user enter ...

Tips for wrapping text labels in mat-slide-toggles (Angular Material)

Is there a way to get the title in mat-slide-toggle to wrap if it's too long while keeping its default position to the right of the toggle? <mat-slide-toggle class="slider">A really long title wrapped</mat-slide-toggle> I attemp ...

Optimize Your Reactstrap Carousel Images for Responsiveness

Despite my extensive search efforts, I have found very limited documentation on how to make images within a ReactStrap carousel responsive to resizing. While the ReactStrap carousel itself is responsive, the images inside it do not resize accordingly. So ...

When attempting to implement sound on hover with an <a attribute containing an image>, the functionality is not functioning as expected

Is there a way to make a sound play only once when hovering over a list item that contains an image? Here is the HTML and JavaScript code I am using: function playclip() { var audio = document.getElementsByTagName("audio")[0]; audio.play(); } <ul ...

Click on the submenu to expand it, then simply select the desired option to navigate

I have created a toggle menu that displays a list of child elements when clicked, and hides them if clicked again. However, when a child element is clicked, I want it to navigate to the corresponding page. I am having trouble getting this functionality to ...

jQuery mobile enhancing user experience with dynamic background images

I am having trouble setting different background images for each page in jQuery Mobile. <div data-role="page" id="pageone">... </div> <div data-role="page" id="pagetwo">... </div> Since each page has a unique ID, I tried ...

CSS problem with rotating image carousel

I'm currently working on incorporating the moving box feature displayed at the bottom of this page. Despite following the CSS code provided, I am facing an issue where the left navigation arrow is not appearing. Can anyone provide any insights or sugg ...