如何绘制三角形并在其中嵌入html表？

Question

对于某些报告需要我想绘制一个三角形并在那个地方内部放置一个html表，所以我将得到如下图所示的输出

我真的很感激有关如何使用html或css或svg或其他任何内容提出建议的建议

Answer 1

将三角形除以较小的数字。 如何使用css http://css-tricks.com/examples/ShapesOfCSS/

创建数字

Answer 2

这是解决方案：

jsFiddle

HTML：

<div>
<table>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
</table>
    <div class="leftcover"></div>
    <div class="rightcover"></div>
</div>

CSS

td{
    display:inline-block;
    padding:5px;
    border-left:1px solid #fff;
}
tr{
    text-align:center;
    background:#ddd;
}
tr td:last-child{
    padding-right:20px;
}
tr td:first-child{
    padding-left:20px;
    border-left:none;
}
div{
    position:relative;
}
.leftcover{
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-top: 100px solid white;
    border-right: 100px solid transparent;
    top:0;
}
.rightcover{
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-top: 100px solid white;
    border-left: 100px solid transparent;
    top:0;
}

JQuery的：

var $height = $("table").height();
var $width = $("table").width();
$(".leftcover").css("border-top-width",$height);
$(".leftcover").css("border-right-width",$width/2);
$(".rightcover").css("border-top-width",$height);
$(".rightcover").css("border-left-width",$width/2);
$(".rightcover").css("left",$width/2);

jsFiddle