Put circle top div position center [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I need to replicate this.
What is the best way to add a cirle like this image with css?
thanks

Answer 1

Here's a quick example, I think you can do it a bit better if you take time ;).
if you want a full circle just make the (border-radius : 50%) for all corners instead of only top.
cheers
.circle{
height: 50px;
width: 100px;
border-top-left-radius:90px;
border-top-right-radius:90px;
background-color: green;
color:white;
margin: 0 auto;
text-align: center;
line-height: 50px;
}
.square{
width:500px;
height: 300px;
background-color: white;
border: 1px solid black;
margin: 0 auto;
}
<div class="circle">1/12</div>
<div class="square"></div>

Answer 2

I've added your numbered tab into the :before tab, so that it will always be attached to your div.
.square {
position: relative;
width: 80%;
height: 300px;
background-color: white;
margin: 60px auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.square:before {
content:'1/12';
position: absolute;
top: -35px;
height: 65px;
width: 65px;
border-radius: 50%;
z-index: -1;
transform: translate(-50%);
left: 50%;
background: #4ED3CE;
color: #fff;
display: flex;
justify-content: center;
padding: 10px;
}
<div class="square">
</div>

Answer 3

You can achieve half circle with following code, then you can customize it yourself
div {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 45px;
width: 90px;
}
.right,
.left {
height: 90px;
width: 45px;
}
.top {
border-top-left-radius: 90px;
border-top-right-radius: 90px;
}
.right {
border-bottom-right-radius: 90px;
border-top-right-radius: 90px;
}
.bottom {
border-bottom-left-radius: 90px;
border-bottom-right-radius: 90px;
}
.left {
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
}
.rotate {
animation: 1s linear infinite rotate;
position: relative;
top: $size * -1;
transform-origin: 50% 100%;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="rotate top"></div>