Design a circular shape using only two colors

Looking to construct a single circle using two half circles, each with a different color. Here is an example:

https://i.sstatic.net/hHrOt.png

DEMO

I have managed to create this effect by utilizing 2 elements and some CSS:

<span class="circle-part half-left-circle"></span>
<span class="circle-part half-right-circle"></span>

and

$size: 100px;
$border: 20px;

...

.half-right-circle {
    border-top-right-radius: $size + $border;
    border-bottom-right-radius: $size + $border;
    border: $border solid green;
    border-left: 0;
}

.half-left-circle {
    border-top-left-radius: $size + $border;
    border-bottom-left-radius: $size + $border;
    border: $border solid red;
    border-right: 0;
}

Even though this approach works well, I am curious if there is a way to achieve the same result using just one HTML element (without pseudo elements)?

htmlcss

Answer №1

Check out this effective snippet demonstrating the usage of border:

  • % values are used instead of px for border-radius, making it much simpler!
  • Use border-color to specify the correct color for each side.
  • Apply transform: rotate(45deg); to achieve the desired rotation.

body{
  background: #ccc;
}

.halves-circle{
  background: #fff;
  height: 200px;
  width: 200px;
  border: 20px solid;
  border-radius: 50%;
  border-color: green green red red;
  transform: rotate(45deg);
}
<div class="halves-circle">

⋅ ⋅ ⋅

You can also utilize CSS variables to create multiple variations:

body{
  background: #ccc;
}

.halves-circle{
  background: #fff;
  height: var(--size);
  width: var(--size);
  border: var(--border) solid;
  border-radius: 50%;
  border-color: green green red red;
  transform: rotate(45deg);
}

#hc1{
  --size: 100px;
  --border: 20px;
}

#hc2{
  --size: 60px;
  --border: 30px;
}

#dot{ /* Customizations like this are possible too! */
  --size: 0px;
  --border: 20px;
}
<div class="halves-circle" id="hc1"></div>
<div class="halves-circle" id="hc2"></div>
<div class="halves-circle" id="dot"></div>

Hope these tips are useful for you.

Answer №2

Check out this simplified solution with just 2 gradients and minimal code:

.circle {
  margin:20px;
  border-radius:50%;
  width:200px;
  height:200px;
  background:
      radial-gradient(circle at center,white 60%,transparent 60.5%),
      linear-gradient(to right,red 50%,green 0);
}

body {
 background-color:pink;
}
<div class="circle">

</div>

Answer №3

Take a look at this code snippet

body {
  background: #ccc;
}
.circle {
 margin: 25px 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 12px solid transparent;
  background-size: 100% 100%, 100% 50%,100% 100%, 100% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), 
                    linear-gradient(360deg, green 100%, lightgrey 100%),
                    linear-gradient(360deg, red 100%, lightgrey 100%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  transform: rotate(90deg);
}
<div class="circle">
</div>

Fiddle link for testing: http://jsfiddle.net/66r7nj4x/

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

Display Bootstrap modal upon page load automatically

Is there a way to automatically trigger the Bootstrap model upon page load? I attempted implementing the following code in my index file: <script type="text/javascript> $(window).load(function () { $('#myModal').modal('sh ...

htmlcsstwitter-bootstrap

Setting up syncfusion components in pt-BR languageHere are the steps to

I'm struggling to grasp the concept of internationalization and globalization when it comes to Angular Synfusion components. I've tried seeking help on stackoverflow in Portuguese, but no one seems to have an answer for what I believe should be ...

htmlangulartypescriptsyncfusion

Ways to verify if a div is empty following an ajax request

When trying to load a php page into a div, I encountered an issue where the content of the div appeared empty. Despite attempting various methods to check if the div contained any html content after loading, I was unable to find a solution. ...

phpjqueryhtmlajax

After running assets:install and assetic:dump, Font Awesome fonts are no longer functioning properly

Setting up a site on shared hosting has been going smoothly, except for the FontAwesome icons which Symfony is having trouble finding in their designated locations. The steps I followed to move the site to production on shared hosting are: To overcome th ...

phpcsssymfonyassetic

Issue with displaying YouTube videos in HTML causing them to be downloaded instead of playing

I'm currently facing an issue with loading a video on my HTML page using the following code: <video v-for="(data, key) in projectData.videos" :key="key" width="320" height="240" controls> <source :src="data.url"> </video> One ...

javascripthtmlvue.jsvideoyoutube

Words existing outside of an element

Currently, I am developing a slider using Bootstrap, and I have encountered an issue where the text displays on the left instead of aligning to the center in relation to the elements. To see this issue in action, you can check out the live demo here: In ...

htmlcsstwitter-bootstrap

Getting the value of an element from a form using jQuery

Struggling to retrieve the values for email and password from a simple HTML form using jQuery. However, all I get is an empty string. Can anyone point out what needs to be changed? Below is the HTML form: <form> <label for="email">Ema ...

jqueryhtmlforms

Logo-enhanced Navigation Bar in Bootstrap

Hey everyone, I've been experimenting with Bootstrap headers that include a logo before the "Brand" text. I'm facing an issue where the navbar doesn't resize properly, as shown in the screenshot below: - The navbar doesn't adjust to t ...

htmlcsstwitter-bootstrap

How can you create a layered block using CSS?

I'm looking to create a page design similar to the one shown in the image below: Image Link I had an idea for rotating coordinates, but I am facing some issues. When stacking the layers in the Y-axis, the first layer covers the others and I can&apos ...

htmlcss

Using the ternary operator in React to implement inline styles

Within my React/Typescript project, I aim to dynamically exhibit a color based on the presence or absence of a value in payload[1]. In the code snippet below, note the usage of an inline style tag. <li className="recharts-tooltip-item" style={ ...

javascripthtmlcssreactjstypescript

Tips for adjusting the div style when resizing the browser

As I work on a script, I encounter an issue where the style of a div should change when it becomes larger due to resizing. Even though I have come up with a solution for this problem, there are still some inconsistencies. Sometimes the width is reported a ...

javascripthtmlcss

Inject Dynamic HTML Content onto the Page or in a Pop-up Box

I am currently working on a C# asp.net Web Forms project that involves a credit card payment system. The system returns HTML code for a 3D payment page, but it does not auto-redirect. Here is a snippet of my request: thirdBasketItem.Price = "0.2"; basketI ...

javascriptc#jqueryhtmlasp.net

Transition within Bootstrap navbar is not as smooth as desired

My bootstrap navbar HTML code is as follows: <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgb(50, 50, 50)"> <button class="navbar-toggler" type="button" data-toggle="col ...

htmlcssbootstrap-4

Leveraging JSON for fetching distinct identifiers from a database

When a user hovers over a parent span containing an empty img tag, I use JSON and jQuery to retrieve the src of the image from the database. The issue arises when the retrieved src is applied to all looped span images on the same page, instead of each imag ...

javascriptjqueryhtmljson

Using Django's view method in conjunction with the PermissionRequiredMixin

It’s interesting how we have a PermissionRequiredMixin with the permission_required attribute. I am curious to know how this can be achieved in a Django view method. Your input is greatly appreciated! Thanks! ...

htmldjangomodel-view-controllerviewdjango-views

designing various containers and adjusting their divisions

I have a pop-up window that contains the code snippet below, defining a template within a "container": <form method="post" class="signin" action="#"> <div id='container'> <div> <div id="divFeeTitle"&g ...

javascriptjqueryhtmlcss

Enhancing the appearance of a hyperlink heading

Seeking guidance on how to customize the title of a hyperlink. For instance, if I have a hyperlink structured like this: <a href="#" title="Hello">Click Here</a> Is there a way to alter the font style and size specifically for the word ' ...

htmlcss

Creating a scrollable card layout specifically for small screens in HTML

I am looking to implement a horizontal scroll (for small screens only) within my card layout so that all cards are displayed in a single row. Here is an example: For small screens: https://i.sstatic.net/5eWyV.png So far, I have added horizontal scrolling ...

htmlcssscroll

Using j Query to create custom masks for various formats with the option to include optional digits

Looking for a way to mask the CVV card number..! The masking should allow for either 3 numbers like xxx 123 or 4 numbers like xxxx 4567 I have attempted to implement this with jQuery mask plugin, but it only allows for 4 characters. How can I enable both ...

javascriptjqueryhtmlmaskmasking

How to extract input field value from HTML TD element with JavaScript

Hey there, I'm currently having an issue with a script that calculates the average of columns. It seems to only access the content within the td and not from the input value itself. Any ideas why I'm getting a result of NaN? I've tried pla ...

javascriptjqueryhtml