html - 如何制作像 iCloud 一样的图标？

Question

有人知道如何让这变得非常简单吗？我是初学者，希望在我的网站上有 3 个图标，以便为学校的任务制作一个基于 icloud 的网站。我只是真的不知道该怎么做，我已经做了一些研究，但我什么也没找到。检查元素有点难以理解......欢迎任何帮助!

iCloud Exemple

Answer 1

试试这个:

.icloud-icon-container {
    vertical-align: middle;
    text-align: center;
    left: 10%;
    position: relative;
    display: table-cell;
}

.icloud-icon {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  border-radius: 50px;
  margin: 20px;
  text-align: center;
  border: 1px solid #e2e2e2;
}

.icloud-icon-label {
   text-align: center;
}

<div class="container">
  <div class="row">
    <div class="col-md-12 icloud-icon-container">
      <div class="icloud-icon"></div>
      <p class="icloud-icon-label">Icon Title</p>
    </div>
  </div>
</div>