用flexbox和css創建一個圓

我正在嘗試創建一個圓形 css 并為其添加更多更改，

這是我的圈子代碼

.container {
  display: flex;
  flex-wrap: nowrap;
  width: 200px;
  height: 50px;
}
.holder {
  margin-right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.h1 {
  background: blue;
}
.h2 {
  background: red;
}
.h3 {
  background: green;
}
.h4 {
  background: grey;
}

和html代碼

<div class="container">
  <div class="holder h1"></div>
  <div class="holder h2"></div>
  <div class="holder h3"></div>
  <div class="holder h4"></div>
</div>

適用于圈子，但我的最終目標是做到這一點

https://prnt.sc/KCA2zWq435oK

我該怎么做，任何幫助將不勝感激

問候

uj5u.com熱心網友回復：

我創建了這張表

.container {
  display: flex;
  flex-wrap: nowrap;
  width: 200px;
  height: 50px;
}

.holder {
  margin-right: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.h1 {
  background: blue;
}

.h2 {
  background: red;
}

.h3 {
  background: green;
}

.h4 {
  background: grey;
}

th {
  writing-mode: vertical-rl;
  min-width: 30px;
  transform: rotate(180deg);
  text-transform: capitalize;
}

td {
  min-width: 30px;
  height: 30px;
}

<table>
  <tr>
    <th>
      drafted
    </th>
    <th>
      submitted
    </th>
    <th>
      approved
    </th>
    <th>
      processed
    </th>
  </tr>
  <tr>
    <td>
      <div class="holder h1">
        <div/>
    </td>
    <td>
      <div class="holder h2">
        <div/>
    </td>
    <td>
      <div class="holder h3">
        <div/>
    </td>
    <td>
      <div class="holder h4">
        <div/>
    </td>
    <td>
      <div class="holder h3">
        <div/>
    </td>
    <td>
      Not drafted - missing
    </td>
  </tr>
</table>

希望對您有所幫助您可以輕松地為自己定制

uj5u.com熱心網友回復：

從語意上講，這是一張表。

此片段將圓圈創建為相關單元格的徑向漸變背景。

標題垂直書寫并旋轉以提供所需的方向。

thead>tr>th {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  text-align: left;
}

tbody>tr>td {
  width: 50px;
  height: 50px;
  --bg: gray;
  background-image: radial-gradient(circle, var(--bg) 0 70%, transparent 70% 100%);
  background-size: 70% 70%;
  background-repeat: no-repeat;
  background-position: center center;
}

tbody>tr>td:last-child {
  width: 400px;
  --bg: transparent;
}

.gold {
  --bg: gold;
}

.green {
  --bg: green;
}

.red {
  --bg: red;
}

<table>
  <thead>
    <tr>
      <th>Drafted</th>
      <th>Submitted</th>
      <th>Approved</th>
      <th>Processed</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Not drafted - missing</td>
    </tr>
    <tr>
      <td class="gold"></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Drafted but not submitted</td>
    </tr>
    <tr>
      <td class="green"></td>
      <td class="green"></td>
      <td></td>
      <td></td>
      <td>Submitted - not approved</td>
    </tr>
    <tr>
      <td class="green"></td>
      <td class="green"></td>
      <td class="green"></td>
      <td></td>
      <td>Approved not processed</td>
    </tr>
    <tr>
      <td class="green"></td>
      <td class="green"></td>
      <td class="green"></td>
      <td class="green"></td>
      <td>Processed</td>
    </tr>
    <tr>
      <td class="gold"></td>
      <td></td>
      <td class="red"></td>
      <td></td>
      <td>Rejected, back in draft</td>
    </tr>
    <tr>
      <td class="green"></td>
      <td class="green"></td>
      <td></td>
      <td></td>
      <td>Rejected initially, submitted again</td>
    </tr>
  </tbody>
</table>

標籤：css弹性盒

上一篇：如何在2個水平表之間創建一個大的“空白”空間

下一篇：在引導程式中，如何使我的卡div回應？