html - 如何绘制带有对 Angular 线和对 Angular 线文本的html表格？

Question

我如何使用 html5 和 css3 绘制这种表格有什么建议吗？

我试过这个我认为太复杂了:Diagonal Lines and Diagonal Texts

我正在使用 css3 样式和 svg html5 标签，有没有其他方法可以制作这种 html 表格？

<div style='width: 300px; height: 100px; display: flex; flex-direction: row-reverse;'>
<div style='width: 100px; height: 100px; border-top: 2px solid rgb(255,0,0); position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
    <div style='margin-left:-40px; margin-top:25px; width: 80px; height: 30px; font-size:19px; background-color: yellow; -ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);'>DATO3</div>
</div>
<div style='width: 100px; height: 100px; border-top: 2px solid rgb(255,0,0); position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
    <div style='margin-left:-45px; margin-top:25px; width: 80px; height: 30px; font-size:19px; background-color: yellow; -ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);'>DATO2</div>
</div>
    <div style='width: 100px; height: 100px; border: 0px solid black; position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
    <div style='margin-left:-40px; margin-top:25px; width: 80px; height: 30px; background-color: white; -ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);'></div>
</div>
    </div>
<div style='width: 300px; height: 100px; display: flex; flex-direction: row-reverse;'>
<div style='width: 100px; height: 100px; border-top: 0px solid black; position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="0%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:3"/>
</svg>
</div>
    <div style='width: 100px; height: 100px; border-top: 2px solid rgb(255,0,0); position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="0%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:3"/>
</svg>
</div>
<div style='width: 100px; height: 100px; border-top: 2px solid rgb(255,0,0); position: relative;'>
<svg style='width: 100%; height: 100%; position: absolute;'>
    <line x1="0" y1="100%" x2="0%" y2="0"
        style="stroke:rgb(255,0,0);stroke-width:3"/>
</svg>
</div>
</div>

Answer 1

主要构建 block 是:

• 标记精美 <table>

• 一个带有倾斜的伪元素边框以获得基本形状

• 在包含标题文本的范围内旋转。

这个概念非常基础，伪元素和 span 使用 position: absolute 定位。并且它们相对于它们的父级定位 <th>具有 position: relative 的 header

Here is the example!

这是它在 Chrome/Firefox/IE10+ 中的样子。 IE 8 - 9 应使用其专有过滤器。

这是 HTML/CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background: #FFF;
}
table {
    border-collapse: collapse;
    margin: 50px 0 0 50px;
    border-top: solid 1px #000;
    position: relative;
}

/* Very top border */
 table:before {
    content:'';
    display: block;
    position: absolute;
    top: -20px;
    left: 120px;
    height: 20px;
    width: 240px;
    border: solid 1px #000;
    border-bottom: none;
}

/* Far right headers top border (it's outside the table) */
 table:after {
    content:'';
    display: block;
    position: absolute;
    border-top: solid 1px #000;
    width: 101px;
    right: -101px;
    top: 0;
}

/* 
     - Apply header background/font colour 
     - Set base z-index for IE 9 - 10
*/
 thead, th:before {
    background: #03a9f4;
    color: #FFF;
    z-index: 1;
}

/* min-width and max-width together act like a width */
 th {
    min-width: 60px;
    max-width: 60px;
    position: relative;
    height: 100px;
}

/* Pseudo element borders */
 th:before {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    right: -50px;
    height: 100px;
    width: 60px;
    border: solid 1px #000;
    border-right: none;
    border-top: none;
    transform: skew(-45deg);
    border-bottom: none;
}

/* Apply the right border only to the last pseudo element */
 thead th:last-child:before {
    border-right: solid 1px #000;
}

/* Apply the top border only to the first rows cells */
 tbody tr:first-child td {
    border-top: solid 1px #000;
}

/* 
     - Rotate and position headings
     - Padding centers the text vertically and does the job of height
     - z-index ensures that the text appears over the background color in IE 9 - 10
*/
 th span {
    transform: rotate(-45deg);
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: -70px;
    bottom: 29px;
    height: 0;
    padding: 0.75em 0 1.85em;
    width: 100px;
    z-index: 2;
}

/* Create first two th styles */
 th:nth-child(1), th:nth-child(2) {
    border: solid 1px #000;
    border-top: none;
    border-bottom: none;
}
th:nth-child(2) {
    border-right: none;
}
th:nth-child(1):before, th:nth-child(2):before {
    display: none;
}

td {
    border: solid 1px #000;
    border-bottom: none;
    border-top: none;
    height: 20px;
    text-align: center;
}
tfoot {
    border: solid 1px #000;
}

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th><span>Three</span></th>
            <th><span>Four</span></th>
            <th><span>Five</span></th>
            <th><span>Six</span></th>
            <th><span>Seven</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tfoot>
</table>