HTML和CSS中的梯形表

Question

I'd like to make an IPA vowel diagram like this one:

I have made a table with 7 rows and 5 columns in HTML, but how do I change the shape of the table to trapezoid using CSS?

I know that it's possible to draw a trapezoid in a graphics editor and then use the resulting image as a background in HTML, but I'd like to do do this with pure CSS if possible.

 <table> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr> </table> 

Answer 1

you can use css like this to make shapes and build the table. Is dont think there i an other way to be honest.

#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px; 
}

next time try to show us what you DID try to get the result.

Answer 2

I think that the closest that you can get with CSS is using some 3d perspective:

 table { transform: translate(100px, 130px) perspective(200px) rotateX(-40deg); transform-origin: bottom right; transform-style: preserve-3d; } td, th { transform: rotateX(40deg); backface-visibility: hidden; } 

 <table> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr> </table>