如何创建圆形图像和文本在bootstrap或纯css中互为补充？

Question

如何创建此图像的示例：

说明：circle是image，rectangles中的每一个都是texts（每个bootstrap都是一行文字）。
该图片使用.image-circle bootstrap圈出，因此我希望与bootstrap兼容，如果不存在任何pure css解决方案，请提供<CustomDiv>a</CustomDiv> <div>b</div> <div>c</div> 解。
谢谢你的贡献。

Answer 1

在这里。你很幸运我喜欢用CSS搞笑lol

.bars{
  margin-top: 26px;
  position:absolute;
  max-width:350px;
}

.bar{
  background:#1E8CBF;
  height:30px;
  width:250px;
  margin-bottom: 30px;
}

.circle{
  background:#1E8CBF;
  border-radius: 100%;
  width:200px;
  height: 200px;
  position:relative;
  float:left;
  left:220px;
  top:0;
  border:20px solid #fff
}

HTML

<div class="container">
      <div class="bars">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>

      <div class="circle">
      </div>  
</div>

以下是DEMO