How to create this image using CSS? - html

Question

I need to be able to replace the image and keep the text/circle. This will be on a responsive site so it needs to work accordingly. (*on bootstrap 3 platform.)
Here's what I got so far:
.box {
color:#fff;
height:auto;
position:relative;
z-index:0;
overflow:hidden;
max-width:586px;
}
.box:after {
content:'yarn';
display:block;
height: 160px;
width:160px;
background-color:red;
border-radius:50%;
position:absolute;
bottom:-10px;
left:40%;
z-index:-1;
}
<div class="box"><img class="img-responsive" src="http://siterepository.s3.amazonaws.com/4253/yarn.jpg" alt="" width="586" height="362" align="" /></div>

Answer 1

Try setting the border-radius just for the top right and top left corners using:
border-top-left-radius: 80px;
border-top-right-radius: 80px;
Note: I used 80px not 50%, as 80px is half of the 160px width
Then give the circle half the height than the width. (80px, 160px)
After that I set the z-index:1; to be higher than -1 so you could see the circle.
Use text-align:center; to center the text.
I also replaced left:40% with left: calc((100% - 160px)/2); which will give you the exact center. (the whole width minus the width of the circle divided by 2)
Add line-height: 80px; to center the text vertically in the half circle
.box {
color:#fff;
height:auto;
position:relative;
z-index:0;
overflow:hidden;
max-width:586px;
}
.box:after {
content:'Yarn';
display:block;
height: 80px;
width:160px;
background-color:red;
border-top-left-radius: 80px;
border-top-right-radius: 80px;
text-align:center;
line-height: 80px;
position:absolute;
bottom:-10px;
left:calc((100% - 160px)/2);
z-index:10;
}
<div class="box"><img class="img-responsive" src="http://siterepository.s3.amazonaws.com/4253/yarn.jpg" alt="" width="586" height="362" align="" /></div>