如何绘制三角形并在其中嵌入 html 表格？ [关闭]答案

【问题标题】：How to draw a triangle and embed html table inside it? [closed]如何绘制三角形并在其中嵌入 html 表格？ [关闭]
【发布时间】：2013-11-30 12:10:35
【问题描述】：

对于某些报告需要，我想绘制一个三角形并在其中放置一个 html 表格，因此我将获得如下图所示的输出

对于如何使用 html 或 css 或 svg 或任何东西来实现这一点，我非常感谢任何建议，谢谢提前

【问题讨论】：

您的问题并没有显示出您的任何努力，至于您可能进行了哪些研究，您为自己进行了哪些尝试。向下投票箭头上的悬停文本显示“此问题未显示任何研究成果；不清楚或无用”。
另见"on topic" page in the Help Center，上面写着“3.询问代码的问题必须证明对正在解决的问题有最低限度的了解。包括尝试的解决方案，为什么它们不起作用，和预期的结果。"

标签： html asp.net css svg

【解决方案1】：

把你的三角形分成更小的数字。如何用css创建图形http://css-tricks.com/examples/ShapesOfCSS/

【讨论】：

【解决方案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

【讨论】：

Agha kheili kheili mamnooon !!!阿里布德 :)