dividing a circle in half with CSS using an image background

Question

dividing a circle in half with CSS using an image background

Is it possible to divide a circle into 2 parts using both RGB and URL images?
Here is an example of how I want it to look: https://i.sstatic.net/r5sWj.png

I have managed to write code that works with RGB, but I am unsure how to achieve the same effect with a URL image. Can someone please assist me:

.divided-circle {
  width: 25px;
  height: 25px;
  background: linear-gradient( 135deg, #26A0DA 50%, #d92550 50%);
  border-radius: 50%;
  border: 0.5px solid #9b9b9b;
  margin-right: 5px;
}

<div>
  <div class="divided-circle"></div>
</div>

html css image geometry

Answer 1

Answer №1

Below is a sample implementation for you to try:

.container {
  width:200px;
  height:200px;
  border-radius:50%;
  background:blue;  /* initial background color */
  position:relative;
  overflow:hidden;
}
.container::before {
  content:"";
  display:block;
  padding-top:100%;
  background:url(https://picsum.photos/id/222/800/800) center/cover; /* second background image */
  /* adjust the angle below to change the rotation */
  -webkit-mask:linear-gradient(45deg,#fff 49.8%,transparent 50%);
          mask:linear-gradient(45deg,#fff 49.8%,transparent 50%);
}

<div class="container"></div>

Use CSS variables to customize easily:

.container {
  --angle:30deg; /* customize the rotation angle */
  /* initial background color */
  --background1:yellow;
  /* second background image */
  --background2:url(https://picsum.photos/id/333/800/800) center/cover;
  
  width:200px;
  height:200px;
  display:inline-block;
  border-radius:50%;
  background:var(--background1); 
  position:relative;
  overflow:hidden;
}
.container::before {
  content:"";
  display:block;
  padding-top:100%;
  background:var(--background2); 
  -webkit-mask:linear-gradient(var(--angle),#fff 49.8%,transparent 50%);
          mask:linear-gradient(var(--angle),#fff 49.8%,transparent 50%);
}

<div class="container"></div>

<div class="container" style="--background1:green;--background2:linear-gradient(red,blue);--angle:90deg;"></div>

<div class="container" style="--background1:url(https://picsum.photos/id/444/800/800?blur) center/cover;--background2:url(https://picsum.photos/id/555/800/800) center/cover;--angle:135deg;"></div>

Answer 2

Below is a sample implementation for you to try:

.container {
  width:200px;
  height:200px;
  border-radius:50%;
  background:blue;  /* initial background color */
  position:relative;
  overflow:hidden;
}
.container::before {
  content:"";
  display:block;
  padding-top:100%;
  background:url(https://picsum.photos/id/222/800/800) center/cover; /* second background image */
  /* adjust the angle below to change the rotation */
  -webkit-mask:linear-gradient(45deg,#fff 49.8%,transparent 50%);
          mask:linear-gradient(45deg,#fff 49.8%,transparent 50%);
}

<div class="container"></div>

Use CSS variables to customize easily:

.container {
  --angle:30deg; /* customize the rotation angle */
  /* initial background color */
  --background1:yellow;
  /* second background image */
  --background2:url(https://picsum.photos/id/333/800/800) center/cover;
  
  width:200px;
  height:200px;
  display:inline-block;
  border-radius:50%;
  background:var(--background1); 
  position:relative;
  overflow:hidden;
}
.container::before {
  content:"";
  display:block;
  padding-top:100%;
  background:var(--background2); 
  -webkit-mask:linear-gradient(var(--angle),#fff 49.8%,transparent 50%);
          mask:linear-gradient(var(--angle),#fff 49.8%,transparent 50%);
}

<div class="container"></div>

<div class="container" style="--background1:green;--background2:linear-gradient(red,blue);--angle:90deg;"></div>

<div class="container" style="--background1:url(https://picsum.photos/id/444/800/800?blur) center/cover;--background2:url(https://picsum.photos/id/555/800/800) center/cover;--angle:135deg;"></div>

Answer 3

Answer №2

To achieve this effect, you can utilize the clip-path property. Here is an example:

.shape1 {
  position: absolute;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.shape2 {
  position: absolute;
  clip-path: polygon(100% 100%, 0% 100%, 100% 0);
}

<img class="shape1" src="https://example.com/image1.png"/>
<img class="shape2" src="https://example.com/image2.png"/>

For more information on the clip-path property, visit this link.

Answer 4

To achieve this effect, you can utilize the clip-path property. Here is an example:

.shape1 {
  position: absolute;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.shape2 {
  position: absolute;
  clip-path: polygon(100% 100%, 0% 100%, 100% 0);
}

<img class="shape1" src="https://example.com/image1.png"/>
<img class="shape2" src="https://example.com/image2.png"/>

For more information on the clip-path property, visit this link.

Answer 5

Answer №3

To achieve a rounded border, you can use the border-radius property and incorporate images or text inside the div elements...

.circle-section{
  width: 150px;
  height: 150px;
  margin-right: 5px;
  display: flex;
  transform: rotate(45deg);
}

.circle-section .left {
  width: 50%;
  height: 100%;
  border-radius:  100% 0% 0% 100% / 50% 50% 50% 50%;
  background: #cdcdcd;
  border: 0.5px solid #9b9b9b;
  border-right: none;
}

.circle-section .right {
  width: 50%;
  height: 100%;
  background: #212121;
  border-radius: 0% 100% 100% 0% / 50% 50% 50% 50%;
  border: 0.5px solid #9b9b9b;
  border-left: none;
}

<div>
  <div class="circle-section">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

Answer 6

To achieve a rounded border, you can use the border-radius property and incorporate images or text inside the div elements...

.circle-section{
  width: 150px;
  height: 150px;
  margin-right: 5px;
  display: flex;
  transform: rotate(45deg);
}

.circle-section .left {
  width: 50%;
  height: 100%;
  border-radius:  100% 0% 0% 100% / 50% 50% 50% 50%;
  background: #cdcdcd;
  border: 0.5px solid #9b9b9b;
  border-right: none;
}

.circle-section .right {
  width: 50%;
  height: 100%;
  background: #212121;
  border-radius: 0% 100% 100% 0% / 50% 50% 50% 50%;
  border: 0.5px solid #9b9b9b;
  border-left: none;
}

<div>
  <div class="circle-section">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

dividing a circle in half with CSS using an image background

Answer №1

Answer №2

Answer №3

Similar questions

Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

Having Trouble with JQuery Triggering Tabs inside an iFrame

Internet Explorer not recognizing attribute selector in jQuery

Need to update various form fields at once with jquery?

Focus border radius for anchor tag image

Choosing jQuery over JQuery Mobile for a standard web application to effectively manage different devices

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

Resize image dimensions to fit within css div class container

What could be causing the background color not to change on the HTML page with Bootstrap?

Getting the present location on Google Maps for the web: A step-by-step guide

Achieving consistent image column heights that decrease evenly

Setting the width of input-group inputs is a feature introduced in Bootstrap 4

Guide to autoplay an uploaded mp4 video in a flask application

Creating a fullscreen layout in HTML with specific minimum and maximum widths

The jQuery scroll function is not working for the span class I specified. What could be causing this issue?

Android failing to adapt to font size changes set by media queries in HTML code

Looking for a solution to resolve the issue "ERROR TypeError: Cannot set property 'id' of undefined"?

The custom radio button is not showing up on iOs Safari

Having trouble implementing styles for an element selected using the document.getElementsByClassName() method

Hiding a button based on the visibility of another button in the user's viewport