如何使用 CSS 创建此图像？

Question

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

这是我目前得到的：

.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

尝试为top right 和top left 角设置border-radius，使用：

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

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

然后给圆圈一半的height 比width。 （80 像素，160 像素）

之后我将z-index:1; 设置为高于-1，这样你就可以看到圆圈了。

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

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

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

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