трапеция таблицы в HTML и CSS

Я хотел бы сделать ИПС гласный диаграмму как этот:трапеция таблицы в HTML и CSS

Я сделал таблицу с 7 строк и 5 столбцов в HTML, но как я изменить форму таблицы на трапецию с помощью 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>

источник

2016-02-26 user20530

Таблицы должны использоваться для отображения табличных данных, например строк и столбцов. Это не табличные данные. Вы должны рассмотреть другую среду для отображения информации, возможно, 'svg' или' canvas'. – dman2306

вы можете использовать CSS, как это сделать формы и построить таблицу. Не думаю, что я другой способ быть честным.

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

В следующий раз попробуйте показать нам, что вы пытались получить.

источник

2016-02-26 12:06:44 owndbymeg

Ваш код не отвечает на мой вопрос, поскольку он только рисует форму трапеции под столом и фактически не изменяет внешний вид самой таблицы. – user20530

Тот факт, что вы получаете этот результат, четко объясняет ваш опыт работы с css. вам нужно построить таблицу самостоятельно, используя css. насколько я знаю ... нет более простого способа. Прости. – owndbymeg

Я думаю, что ближе всего, что вы можете получить с помощью 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>

источник

2016-02-26 15:47:29 vals

трапеция таблицы в HTML и CSS

ответ

Смежные вопросы