Overflow:hidden is not for the divs of circle shape?

Overflow:hidden is not for the divs of circle shape? - html

I'm having trouble with the code below.
I want the reflection of the windmill and all to be embedded inside the circle shape, but i'm unable to do so.
Please help me.
Thank you in advance.
Here is my html
body {
background-color: white;
}
#Circle {
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
#Circle #cont {
background-color: transparent;
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>

You can clip the circle like this:
body {
background-color: white;
}
#Circle {
-webkit-clip-path: inset(0 0 0 0 round 250px);
clip-path: inset(0 0 0 0 round 250px);
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
#Circle #cont {
background-color: transparent;
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>

Set position: relative; z-index: 1; to #Circle
body {
background-color: white;
}
#Circle {
position: relative;
z-index: 1;
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
#Circle #cont {
background-color: transparent;
width: 500px;
height: 500px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>

Like in similar questions (Overflow hidden with border radius not working in chrome), it seems that setting
#Circle {
position: relative;
z-index: 1;
}
will solve your issue.

increase width and height of #circle and #Circle #cont so its display properly
body {
background-color: white;
}
#Circle {
background-color: #22304D;
background: linear-gradient(to bottom, #22304D, #5E7B9B);
width: 570px;
height: 570px;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
z-index:-2px;
position:absolute;
}
#Circle #cont {
background-color: transparent;
width: 570px;
height: 570px;
border-radius: 100%;
margin: 0 auto;
box-shadow: inset 0 0 100px black;
}
#Circle #cont .top {
height: 250px;
position: relative;
background-color: transparent;
border-top-left-radius: 900px;
border-top-right-radius: 900px;
}
.bottom {
display: inline-block;
position: relative;
margin-top: 390px;
opacity: 0.6;
filter: blur(2px);
transform: scaleY(-1);
}
.floor {
background-color: #1E2D49;
width: 468px;
margin-left: 16px;
position: absolute;
height: 20px;
margin-top: 320px;
z-index: 0;
}
.floor::after {
content: "";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
margin-top: -30px;
margin-left: -3px;
border-radius: 90% 100% 0 0;
}
.floor::before {
content: "";
background-color: content:"";
background-color: #1E2D49;
width: 200px;
height: 50px;
position: absolute;
transform: rotateX(45deg);
border-radius: 90% 100% 0 0;
;
width: 347px;
height: 70px;
position: absolute;
transform: rotateX(45deg);
margin-left: 122px;
margin-top: -50px;
border-radius: 100% 100% 0 0;
}
.sky {}
.moon {
background-color: white;
width: 48px;
height: 48px;
z-index: 2;
border-radius: 100%;
position: absolute;
margin-left: 130px;
margin-top: 180px;
box-shadow: 0 0 5px white, 0 0 10px #1E2D49, 0 0 90px white;
}
.stars {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.mill {
background-color: #1E2D49;
width: 50px;
height: 140px;
transform: perspective(12px) rotateX(3deg);
position: absolute;
z-index: 3;
margin-top: 150px;
margin-left: 330px;
}
.mill::before {
content: "";
background-color: #FDC500;
width: 20px;
height: 20px;
position: absolute;
margin-left: 15px;
margin-top: 35px;
}
.mill::after {
content: "";
background-color: #FDC500;
width: 20px;
height: 25px;
position: absolute;
margin-left: 15px;
margin-top: 70px;
}
.dome {
background-color: #1E2D49;
width: 35px;
height: 35px;
position: absolute;
transform-origin: 0 100%;
transform: rotate(45deg);
overflow: hidden;
margin-left: 330px;
margin-top: 125px;
z-index: 4;
}
.fan {
background-color: #37475E;
/*37475E */
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
margin-top: 155px;
margin-left: 350px;
z-index: 7;
animation-name: rotate_fan;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.fan_blade1,
.fan_blade2,
.fan_blade3,
.fan_blade4 {
background-color: #37475E;
width: 4px;
height: 60px;
position: absolute;
z-index: 6;
margin-left: 35px;
margin-top: -28px;
border-left: 1.5px solid black;
border-top: 1px solid black;
transform: rotate(90deg);
}
.fan_blade2 {
transform: rotate(180deg);
margin-left: 1px;
margin-top: 5px;
}
.fan_blade3 {
transform: rotate(360deg);
margin-left: 3px;
margin-top: -60px;
}
.fan_blade4 {
transform: rotate(270deg);
margin-top: -28px;
margin-left: -30px;
}
.fan_blade1::before,
.fan_blade2::before,
.fan_blade3::before,
.fan_blade4::before {
content: "";
background-color: transparent;
width: 20px;
height: 45px;
margin-left: 5px;
background-size: 10px 11px;
background-image: linear-gradient(to left, gray 2px, transparent 1px), linear-gradient(to bottom, gray 2px, transparent 1px), linear-gradient(to top, gray 1px, transparent 0px);
position: absolute;
}
#keyframes rotate_fan {
from {}
to {
transform: rotate(360deg);
}
}
<div id="Circle">
<div id="cont">
<div class="top">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
<div class="bottom">
<div class="dome"></div>
<div class="fan">
<div class="fan_blade1"></div>
<div class="fan_blade2"></div>
<div class="fan_blade3"></div>
<div class="fan_blade4"></div>
</div>
<div class="mill"></div>
<div class="sky">
<div class="stars"></div>
<div class="moon"></div>
</div>
<div class="floor">
</div>
</div>
</div>
</div>

Related

How to make Reindeer centered

I have this reindeer code, but it is very off center. I made this following a tutorial but in the tutorial it worked great but not on mine.
This is all the CCS code for the reindeer.
.reindeer {
height: 510px;
width: 350px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 320px;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 340px;
top: 300px;
}
.leg2 {
left: 380px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 305px;
z-index: -1;
}
Im not sure how it made my reindeer so far off the center, I have tried changing relative to absolute, but it wont work. Anyone want to help me? This is a school project, and i need it done very fast.
https://imgur.com/a/rNKdyut
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
I found out something, but again same problem with it not being completely centered. I forgot to add the
height: 510px;
width: 350px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
in the .raindeer
And now it is more centered but i dont know how to make it more centered.

Excellent work on the styles for this. Rather than trying to make the reindeer centred - the simplest approach is to put the reindeer in a div and centre that - I am using 100vw and 100vh to make the container the full screen size - and then flex to align it to the vertical and horizontal centres.
UPDATE - I also adjusted your left positions of the different elements. You can also do this with flex - but to keep it as simple as possible - I just reduced the left values that you have.
Its bbest to view this in the full screen snippet - and again - damn fine work on the styling - I like what you have done :)
.wrapper {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content:center
}
.reindeer {
position: relative;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 0;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 70px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 50px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 15px;
top: 300px;
}
.leg2 {
left: 55px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: -15px;
z-index: -1;
}
<div class="wrapper">
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
</div>

.header {
height: 100%;
width: 50%;
display: flex;
align-items: center;
justify-content:center
}
.reindeer {
position: relative;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 320px;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 340px;
top: 300px;
}
.leg2 {
left: 380px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 305px;
z-index: -1;
}
<div class="header">
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
</div>

It's all to do with you setting the left properties in your CSS. If you reduce these to shift the reindeer bits to just occupy the reindeer div you can then set the reindeer width to fit-content then use margin: auto to position it in the center of your screen.
Here's a couple of good videos by Kevin Powell on positioning here and here.
An explainer on how to use margin to center elements can be found on CSS tricks
If you like this sort of thing then try some of the challenges at CSS battle. It'll really sharpen your skills up.
Nice reindeer btw.
.pos {
/*this is used to draw a centerline down the screen. Feel free to delete this*/
position: fixed;
width: 50%;
height: 700px;
border-right: 1px solid red;
}
.reindeer {
/*position: relative; removed this */
width: fit-content; /* added this */
margin: auto; /* added this */
}
.face {
background-color: #a98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 22px; /* reduced this */
}
.antler1,
.antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6c584c;
border-top: 10px solid #6c584c;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1,
.a2,
.a3 {
background-color: #6c584c;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1,
.eye2 {
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px;
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1,
.ear2 {
background-color: #95755e;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #ee0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #f8453b;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1,
.leg2 {
background-color: #6c584c;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 40px; /*reduced this */
top: 300px;
}
.leg2 {
left: 85px; /*reduced this */
top: 200px;
}
.body {
background-color: #95755e;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 5px; /* reduced this */
z-index: -1;
}
<div class='pos'></div>
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>

Divide sections in progress bar

I am working on angular app and I am very new to html and css. I am trying to make a progress bar. I want to divide each section of this progress bar into two sub sections with different background color as shown here in the image below.
my code is as follows:
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
simple
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
How can I do this? Please help.

.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(-45deg);
}
#div1{
width:60%;
}
#div2{
width:40%;
}
#div2:hover:before,#div2:hover:after
{
background: green !important;
}
#div1:hover:before,#div1:hover:after
{
background: orange; !important;
}
<div class="wrap">
<div class="progress">
<div class="progress" id="div1">simple</div>
<div class="progress" id="div2">simple</div>
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
transform: skew(-45deg);
}
#div1{
width:60%;
}
#div2{
width:40%;
}
#div2:hover:before,#div2:hover:after
{
background: green !important;
}
#div1:hover:before,#div1:hover:after
{
background: orange; !important;
}
<div class="wrap">
<div class="progress">
<div class="progress" id="div1">simple</div>
<div class="progress" id="div2">simple</div>
</div>
<div class="progress">
as
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>

You could use a linear gradient, e.g.:
background: linear-gradient(90deg, rgba(0,212,255,1) 80%, rgba(0,0,0,0.2) 80%);
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
background: linear-gradient(90deg, rgba(0,212,255,1) 80%, rgba(0,0,0,0.2) 80%);
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}
<div class="wrap">
<div class="progress">
simple
</div>
<div class="progress">
<div style="display:inline-block;width:80%;">80%</div>
<div style="display:inline-block;width:20%;">20%</div>
</div>
<div class="progress">
complex
</div>
<div class="progress">
Web Development
</div>
</div>

How to show my checkbox out of it's parent div?

First of all, I want to let you know that this task should be built using HTML & CSS only.
Secondly, I have to put [from 'sun' div to 'neck'div] as a sibilings to the checkbox in order to control it by css, and now the problem that How to show my checkbox out of it's parent div which is the 'outerCircle'.
body {
width: 50%;
height: 100%;
margin: 20px;
}
article {
position: absolute;
background-color: transparent;
width: 400px;
height: 60%;
margin-top: 40px;
margin-left: 20px;
}
.day {
background-color: #F2D16D;
position: relative;
border-radius: 50%;
left: 70px;
width: 12%;
height: 10%;
top: -15px;
box-shadow: 1px 1px 3px 3px#F2D16D;
}
.moon {
position: relative;
top: -60px;
left: 90%;
height: 40px;
width: 50px;
box-shadow: -12px 2px 0 8px #E1E1E1;
border-radius: 50%;
filter: drop-shadow(9px 9px 6px #E1E1E1);
}
.outerCircle {
/* top: -50%; */
position: absolute;
/* z-index: 1; */
width: 100%;
height: 80%;
border-radius: 50%;
border: 15px solid #46A679;
overflow: hidden;
display: block;
}
.innerCircle {
position: absolute;
z-index: -2;
background-color: #E0E0E0;
width: 210%;
height: 795%;
border-radius: 50%;
top: 205%;
left: -65%;
/* overflow: hidden; */
}
.sun {
background-color: #F2D16D;
position: relative;
width: 30%;
height: 120%;
border-radius: 50%;
left: 70%;
top: 280%;
}
.catBody {
position: relative;
z-index: -1;
background-color: #E4774F;
height: 460%;
width: 120%;
top: 180px;
right: 40px;
transform: translate(0%, 10%);
}
.leftear,
.rightear {
position: relative;
width: 0%;
height: 0%;
}
.leftear {
border-top: 70px solid transparent;
border-right: 100px solid #E4774F;
left: 100px;
bottom: 194%;
}
.rightear {
border-top: 70px solid transparent;
border-left: 100px solid #E4774F;
left: -40px;
bottom: 334%;
}
.leftEye {
position: relative;
z-index: 1;
background-color: white;
width: 15%;
height: 60%;
border-radius: 50%;
bottom: 220%;
left: 10%;
}
.rightEye {
position: relative;
z-index: 1;
background-color: white;
width: 15%;
height: 60%;
border-radius: 50%;
bottom: 280%;
left: 55%;
}
.noise {
position: fixed;
background-color: #0D0D0D;
/* z-index: 1; */
width: 3%;
height: 2%;
border-radius: 50%;
top: 410px;
left: 245px;
}
.neck {
position: absolute;
/* z-index: -1; */
width: 0;
height: 0;
top: 390;
left: -40px;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-top: 120px solid white;
}
/* switch section */
.button input {
/* Remember: this is to clean the shape of the radio button */
opacity: 0;
width: 0;
height: 0;
}
.button:hover {
cursor: pointer;
}
.button {
display: inline-block;
position: absolute;
z-index: 3;
width: 200px;
height: 50px;
left: 120px;
top: -115;
}
.slider {
position: absolute;
top: -10;
left: 0;
right: 0;
bottom: 0;
background-color: #47AB84;
border-radius: 190px;
transition: .7s;
}
/* internal circle */
.slider:before {
position: absolute;
content: "";
left: 4px;
bottom: 4px;
background-color: #FBE26C;
transition: all .7s;
}
.round:before {
top: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 15px solid #65E3B5;
}
/* Animate the switch */
input:checked+.slider::before {
transform: translateX(140px);
}
#select1:checked~.innerCircle {
background-color: #0D0D0D;
}
#select1:checked~.sun {
background-color: white;
left: 0%;
}
#select1:checked~.leftEye {
height: 10%;
position: relative;
z-index: 1;
background-color: white;
width: 15%;
/* height: 60%; */
border-radius: 50%;
bottom: 220%;
/* left: 10%; */
}
#select1:checked~.rightEye {
height: 10%;
position: relative;
z-index: 1;
background-color: white;
width: 15%;
/* height: 60%; */
border-radius: 50%;
bottom: 230%;
/* left: 55%; */
}
.catBody:hover {
position: relative;
z-index: -1;
background-color: #E4774F;
height: 460%;
width: 120%;
top: 200px;
/* right: 30px; */
transform: translate(0%, 10%);
}
.catBody:hover~.leftear {
border-top: 70px solid transparent;
border-right: 100px solid #E4774F;
/* left: 110px; */
bottom: 150%;
}
.catBody:hover~.rightear {
border-top: 70px solid transparent;
border-left: 100px solid #E4774F;
/* left: -30px; */
bottom: 280%;
}
.catBody:hover~.rightEye {
height: 10%;
position: relative;
z-index: 1;
background-color: white;
width: 15%;
/* height: 60%; */
border-radius: 50%;
bottom: 230%;
/* left: 60%; */
}
.catBody:hover~.leftEye {
height: 10%;
position: relative;
z-index: 1;
background-color: white;
width: 15%;
/* height: 60%; */
border-radius: 50%;
bottom: 220%;
/* left: 15%; */
}
#select1:checked~.catBody:hover~.rightEye {
width: 15%;
height: 60%;
bottom: 280%;
/* left: 55%; */
}
#select1:checked~.catBody:hover~.leftEye {
width: 15%;
height: 60%;
/* left: 10%; */
}
<article role="img">
<div class="day"></div>
<div class="moon"></div>
<div class="whole">
<div class="outerCircle">
<label class="button" for="select1">
<input id="select1" type="checkbox">
<span class="slider round"></span>
<div class="innerCircle"></div>
<div class="sun"></div>
<div class="catBody"></div>
<div class="leftear"></div>
<div class="rightear"></div>
<div class="leftEye"></div>
<div class="rightEye"></div>
<div class="noise"></div>
<div class="neck"></div>
</label>
</div>
</div>
</article>
I had to put the divs and the checkbox inside it
because the outer circle should above all and the over flow of the 'catBody' should be behind the 'outerCircle' as shown in the picture,
and I tried to use z-index but it didn't work with me, because it effected on hover work. How do I deal with it?

Shape Style in Sketch from CSS

what I want to do is to achieve the image with css, but I could not achieve exactly what I want. Thanks in advance for your help on how to do it.
.alt {
color: white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 130px;
background-color: #d2151e;
}
.alt:before {
content: ' ';
background: none;
display: block;
height: 0;
position: absolute;
width: 0;
top: 0;
left: 50%;
z-index: 99;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ffffff;
}
.alt:after {
content: '';
}
<div class="alt flex">
<div class="flex w-full h-full item-center">
<div style="width: 40%">
</div>
</div>
<div class="logo">
</div>
</div>

Something like that ?
:root {
--card-width: 200px;
}
.container {
position: relative;
background-color: #E01D2B;
height: 180px;
width: 600px;
margin: auto;
overflow: hidden;
}
.arrow {
height: 100px;
width: 100%;
background-color: white;
display: flex;
justify-content: center;
align-items: flex-end;
}
.arrow::after {
display: block;
background-color: white;
width: 20px;
height: 20px;
bottom: 0;
content: '';
transform: translate(calc(var(--card-width) / -2), 50%) rotate(45deg);
}
.card {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: calc(var(--card-width) + 40px);
height: 110px;
border-top-left-radius: 1em;
background-color: #eee;
transform: translate(34px) skewX(-30deg);
}
<div class="container">
<div class="arrow"></div>
<div class="card"></div>
</div>

Here is what you can do with css
.alt {
color: white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 130px;
background-color: #d2151e;
}
.alt:before {
content: ' ';
background: none;
display: block;
height: 0;
position: absolute;
width: 0;
top: 0;
left: 32%;
z-index: 99;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ffffff;
}
.alt:after {
content: '';
}
.logo {
background: #f0f0f0;
width: 40%;
height: 160px;
position: absolute;
right: -100px;
box-shadow: -2px 1px 4px #757575c9;
top: -30px;
border-radius: 15px 0 0 0;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
overflow: hidden;
}
and html is
<div class="alt flex">
<div class="flex w-full h-full item-center">
<div style="width: 40%">
</div>
</div>
<div class="logo">
</div>

Rounded Semicircle with CSS

I'm struggling to make the semicircle edges round, where can i fix my code?
.circle {
position: absolute;
width: 80px;
height: 50px;
background-color: transparent;
top: 70;
left: 20;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
border: 20px solid #fff58f;
border-top: 0;
}
<div class="circle"></div>

Only possible way to do this in pure CSS is by faking it with pseudo-elements:
.wrapper {
background: darkorange;
border-radius: 50%;
width: 200px;
height: 200px;
display: grid;
justify-content: center;
align-content: center;
}
.box {
background: orange;
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
}
.circle {
position: absolute;
width: 100px;
height: 50px;
background-color: transparent;
bottom: 0;
left: -10px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
border: 20px solid #FFF58F;
border-top: 0
}
.circle::before, .circle::after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
}
.circle::before {
left: -20px;
top: -8px;
}
.circle::after {
right: -20px;
top: -8px;
}
<div class="wrapper">
<div class="box">
<div class="circle"></div>
</div>
</div>

Another possibility with css
I have used ::before and ::after pseudo elements for the rounded corner for the semi circle.
.parentcircle {
position: absolute;
background: #824b20;
width: 160px;
height: 160px;
border-radius: 50%;
padding: 30px;
}
.outercircle {
position: relative;
width: 100%;
height: 100%;
background: #e08027;
border-radius: 50%;
}
.circle {
position: relative;
width: calc(100% - 20px);
height: calc(50% - 10px);
background-color: transparent;
top: 50%;
left: -10px;
border-bottom-right-radius: 50% 100%;
border-bottom-left-radius: 50% 100%;
border: 20px solid #FFF58F;
border-top: 0
}
.circle::before {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
top: -10px;
left: -20px;
}
.circle::after {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
position: absolute;
background: #FFF58F;
top: -10px;
left: 100%;
}
<div class="parentcircle">
<div class="outercircle">
<div class="circle"></div>
</div>
</div>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Overflow:hidden is not for the divs of circle shape? - html

Like in similar questions (Overflow hidden with border radius not working in chrome), it seems that setting #Circle { position: relative; z-index: 1; } will solve your issue.

Related

How to make Reindeer centered

Divide sections in progress bar

How to show my checkbox out of it's parent div?

Shape Style in Sketch from CSS

Rounded Semicircle with CSS

Categories

Resources