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

如何创建类似于此图像的示例：

---

描述：

圆圈

是一个

图像

，每个

矩形

都是

文本

（每个都是一行文本）。
图像是使用

bootstrap

.image circle

，因此我想与

bootstrap

兼容，如果不存在任何

bootstrap

解决方案，请给出一个

纯css

解决方案。

---

谢谢你的贡献。

给你。你很幸运，我喜欢用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

---

以下是

您如何期望每行文本的长度正确？@aw04，文本长度并不重要。我的主要目的是在每一行的开头填充（靠近圆圈）。你是一个伟大的艺术家，我喜欢你的画；）。

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

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