image - 使用 css 或 canvas 制作表格

Question

我想知道是否可以使用 css 或 canvas 创建下面的图像？这似乎是可能的，但没有办法完成这样的壮举。

感谢您花费的时间。

编辑{已解决}

在 friend @apaul34208的帮助下，可以做如下: http://jsfiddle.net/Igaojsfiddle/CcDG7/

#hexagon {
    width: 50px;
    height: 55px;
    background: red;
    position: relative;
}

#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid red;
}

谢谢大家

Answer 1

您可以这样使用 Canvas :

Demo

HTML

<canvas id="demo" width=90 height=120></canvas>

JavaScript

var ctx = demo.getContext('2d'),  /// get canvas element
    w = demo.width,               /// cache dimensions
    h = demo.height,
    cw = w * 0.5;                 /// center hori.

ctx.beginPath();                  /// start path
ctx.moveTo(0, 0);                 /// plot shape
ctx.lineTo(w, 0);
ctx.lineTo(w, h - cw * 0.8);
ctx.lineTo(cw, h);
ctx.lineTo(0, h - cw * 0.8);
ctx.closePath()                   /// closes and ends last line
ctx.fillStyle ='#f55641';
ctx.fill();                       /// fill shape