Write code to create table with arrow like below by css and html?-CodePudding

I would like to create table complex arrow-like shape with CSS like this image:

This is the current code:

<style>
.border-dark {
    border-color: #212529 !important;
}
.table-gray {
    background: rgb(97, 97, 97);
    color: white;
}

.table-rowspan {
    background-color:rgb(97, 97, 97) !important;
    color: white;
}
table, th, td {
  border-collapse: collapse;
  border: 1px solid black;
}
table th:nth-child(1) {
    width: 70px;
    min-width: 70px;

}
table th:nth-child(2) {
    width: 60px;
    min-width: 60px;
    height: 20px;
}
</style>

<table class="table-bordered border-dark">
   <tr class="table-rowspan border-dark">
       <th rowspan="10" class="table-rowspan border-dark"></th>
       <th></th>
   </tr>
   <tr>
      <td>1</td>
   </tr>
   <tr>
      <td>2</td>
   </tr>
   .....
   <tr>
      <td>9</td>
   </tr>

</table>

and the current result:

Please help me draw up and down arrows with any letter in the first column. Thank you so much

CodePudding user response：

Instead of treating the arrow section as the first column of the table, why don't you use a separate div for the arrow part with position: absolute;, top: 0; left: -100%;, and height: 100%;? Ofcourse the main table div would be position: relative; and the arrow div would be its child.

This arrow div would further have 5 spans, each for the elements: alphabet on top, top pointing arrow, centre text, down pointing arrow, alphabet at the bottom.

Arrow div = display: flex; flex-direction: column;

Use a png for top/bottom arrow and flip if vertically for the reverse.

CodePudding user response：

I was able to create a quick .svg file for the arrows you want.
I would recommend using this as a background image for the side area and add text on top of that.

The file was software-generated so its hard to read, but it is small enough to give it a shot.
I hope you will find this at least a bit helpful.

The logic is this:

Create a closed path for the arrows
Add a radial gradient on that shape with the desired colors

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 175 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <path d="M87.258,48l-52.258,152.277l30.112,0l-0,399.294l-30.112,-0l52.258,152.429l51.742,-152.429l-29.705,-0l-0,-399.294l29.705,0l-51.742,-152.277Z" style="fill:url(#_Radial1);"/>
    <defs>
    <radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.257918,-199.723,1351.97,-1.7459,87.2579,400)">
    <stop offset="0" style="stop-color:#585858;stop-opacity:1"/>
    <stop offset="1" style="stop-color:#d5d5d5;stop-opacity:1"/></radialGradient>
    </defs>
</svg>

CodePudding user response：

As the arrow appears to be for decorative purposes there is no need to put it into the main HTML.

This snippet draws it with a polygon which clips a path on a before pseudo element on the first th element. This has a background which goes from light gray to transparent in the middle and back to light gray.

An after pseudo element puts in some text - but more is needed here in terms of positioning as it appears the text required would be in a vertical script (?).

The black splodge effect is made with a radial gradient on the th element.

.border-dark {
  border-color: #212529 !important;
}

.table-gray {
  background: rgb(97, 97, 97);
  color: white;
}

.table-rowspan {
  background-color: rgb(97, 97, 97) !important;
  color: white;
}

table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

table th:nth-child(1) {
  width: 70px;
  min-width: 70px;
}

table th:nth-child(2) {
  width: 60px;
  min-width: 60px;
  height: 20px;
}

th:first-child {
  position: relative;
  backgroound-image: radial-gradient(black, white);
  background-position: center center;
}

th:first-child::before {
  content: '';
  width: 70%;
  height: 90%;
  background-image: linear-gradient(#eeeeee, transparent, #eeeeee);
  top: 5%;
  left: 5%;
  z-index: 1;
  position: absolute;
  --x: 30%;
  --y: 15%;
  clip-path: polygon(50% 0, 100% var(--y), calc(100% - var(--x)) var(--y), calc(100% - var(--x)) calc(100% - var(--y)), 100% calc(100% - var(--y)), 50% 100%, 0% calc(100% - var(--y)), var(--x) calc(100% - var(--y)), var(--x) var(--y), 0 var(--y));
}

th:first-child::after {
  content: 'A';
  color: white;
  font-family: sans-serif;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  /* work needed on exact positioning and requirement for text eg. vertical?? */
}

<table class="table-bordered border-dark">
  <tr class="table-rowspan border-dark">
    <th rowspan="10" class="table-rowspan border-dark"></th>
    <th></th>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
  </tr>

</table>

Note: CSS variables, --x and --y, are used to define the arrow head. Change these if you want a more (or a less) pointy one. And change the width of the before element if you would like it fatter (or thinner). %s are used so it should be responsive if you go down that route.