HTML和CSS中的梯形表

Question

我想制作一个IPA元音图，如下所示：

我已经用HTML制作了一个包含7行5列的表格，但是如何使用CSS 将表格的形状更改为梯形 ？

我知道可以在图形编辑器中绘制梯形，然后将生成的图像用作HTML中的背景，但是我想尽可能使用纯CSS做到这一点。

 <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

您可以像这样使用CSS制作形状并建立表格。 是不是认为我还有另一种诚实的方式。

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

下次尝试向我们展示您DID尝试获得的结果。

Answer 2

我认为使用CSS可以得到的最接近的是使用3D透视图：

 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>