create a circle with flexbox and css-CodePudding

I am trying to create a circle css and add some more changes to it,

Here is my code for circles

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

and the html code

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

works well for the circles, but my end goal is to do this

https://prnt.sc/KCA2zWq435oK

how can i do this, any help will be much appreciated

regards

CodePudding user response：

I created this table

.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 >
        <div/>
    </td>
    <td>
      <div >
        <div/>
    </td>
    <td>
      <div >
        <div/>
    </td>
    <td>
      <div >
        <div/>
    </td>
    <td>
      <div >
        <div/>
    </td>
    <td>
      Not drafted - missing
    </td>
  </tr>
</table>

I hope it helps you You can easily customize it for yourself

CodePudding user response：

Semantically this is a table.

This snippet creates the circles as radial-gradient backgrounds to the relevant cells.

The headings are written vertically and rotated to give the desired orientation.

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 ></td>
      <td></td>
      <td></td>
      <td></td>
      <td>Drafted but not submitted</td>
    </tr>
    <tr>
      <td ></td>
      <td ></td>
      <td></td>
      <td></td>
      <td>Submitted - not approved</td>
    </tr>
    <tr>
      <td ></td>
      <td ></td>
      <td ></td>
      <td></td>
      <td>Approved not processed</td>
    </tr>
    <tr>
      <td ></td>
      <td ></td>
      <td ></td>
      <td ></td>
      <td>Processed</td>
    </tr>
    <tr>
      <td ></td>
      <td></td>
      <td ></td>
      <td></td>
      <td>Rejected, back in draft</td>
    </tr>
    <tr>
      <td ></td>
      <td ></td>
      <td></td>
      <td></td>
      <td>Rejected initially, submitted again</td>
    </tr>
  </tbody>
</table>