circle divided by two css with image - html

Question

How to divide circle into 2 parts, which can be rgb or url image? which looks like
so I wrote code which works just with rgb, but I don't know how it can be with url image... please help 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>

Answer 1

you can try like below:
.box {
width:150px;
border-radius:50%;
background:red; /* first background */
position:relative;
overflow:hidden;
}
.box::before {
content:"";
display:block;
padding-top:100%;
background:url(https://picsum.photos/id/1074/800/800) center/cover; /* second background */
/* adjust the below angle to control the rotation */
-webkit-mask:linear-gradient(60deg,#fff 49.8%,transparent 50%);
mask:linear-gradient(60deg,#fff 49.8%,transparent 50%);
}
<div class="box"></div>
With CSS variables to easily control:
.box {
--a:65deg; /* angle of rotation */
/* first background */
--b1:red;
/* second background */
--b2:url(https://picsum.photos/id/1074/800/800) center/cover;
width:150px;
display:inline-block;
border-radius:50%;
background:var(--b1);
position:relative;
overflow:hidden;
}
.box::before {
content:"";
display:block;
padding-top:100%;
background:var(--b2);
-webkit-mask:linear-gradient(var(--a),#fff 49.8%,transparent 50%);
mask:linear-gradient(var(--a),#fff 49.8%,transparent 50%);
}
<div class="box"></div>
<div class="box" style="--b1:blue;--b2:linear-gradient(red,yellow);--a:135deg;"></div>
<div class="box" style="--b1:url(https://picsum.photos/id/1014/800/800?grayscale) center/cover;--b2:url(https://picsum.photos/id/1014/800/800) center/cover;--a:180deg;"></div>

Answer 2

You can use clip-path for this:
.overlap1 {
position: absolute;
clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.overlap2 {
position: absolute;
clip-path: polygon(100% 100%, 0% 100%, 100% 0);
}
<img class="overlap1" src="https://i.ya-webdesign.com/images/avatar-png-1.png"/>
<img class="overlap2" src="https://cdn.iconscout.com/icon/free/png-512/avatar-369-456321.png"/>
More on clip-path here.

Answer 3

You can border-radius this way, and inside the divs you can image or text ...
.divided-circle{
width: 150px;
height: 150px;
margin-right: 5px;
display: flex;
transform: rotate(45deg);
}
.divided-circle .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;
}
.divided-circle .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="divided-circle">
<div class="left"></div>
<div class="right"></div>
</div>
</div>