如何使用CSS创建此图像？

Question

我需要能够替换图像并保留文本/圆圈。这将在响应式网站上，因此需要相应地工作。 （*在bootstrap 3平台上。）

这是我到目前为止所得到的：

＆＃13;

＆＃13;

.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;
 }

＆＃13;

<div class="box"><img class="img-responsive" src="http://siterepository.s3.amazonaws.com/4253/yarn.jpg" alt="" width="586" height="362" align="" /></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用以下内容为border-radius和top right角设置top left：

 border-top-left-radius: 80px; 
 border-top-right-radius: 80px;

注意：我使用80px而不是50%，因为80px是160px宽度的一半

然后将圆圈设为height的一半而不是width。 （80px，160px）

之后我将z-index:1;设置为高于-1，以便您可以看到该圈子。

使用text-align:center;将文字居中。

我还将left:40%替换为left: calc((100% - 160px)/2);，这将为您提供准确的中心。 （整个宽度减去圆的宽度除以2）

添加line-height: 80px;以使文本在半圆圈中垂直居中

＆＃13;

＆＃13;

.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;
 }

＆＃13;

<div class="box"><img class="img-responsive" src="http://siterepository.s3.amazonaws.com/4253/yarn.jpg" alt="" width="586" height="362" align="" /></div>

＆＃13;

＆＃13;

＆＃13;