Как создать внутренний скос таблицы в HTML / CSS?

Для макета стандартный HTML-тег table делает все это, и его также можно использовать.

Чтобы получить желаемый эффект границы, взгляните на различные параметры границы CSS здесь: http://www.w3schools.com/css/css_reference.asp#border

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

Обновлено: Я почему-то не видел скосов (думаю, я виноват в том, что слишком поздно ночью и мое зрение было слишком размытым). Мне пришлось увеличить масштаб, чтобы действительно их увидеть, но я обновил свое решение, чтобы оно соответствовало. Вам нужно добавить дополнительный тег «div», чтобы это решение работало, но это возможно, хотя я не думаю, что это работает в той степени, в какой показывает ваше изображение. Впрочем, работать он будет довольно прилично. Ниже я включил некоторый сценарий jQuery, который устранит необходимость в дополнительном теге <div />.

Для разметки вы должны использовать что-то вроде этого:

<table cellspacing = "0">
    <tr><td class = "side"><div class = "bevel">lorem</div></td><td class = "side"><div class = "bevel">ipsum</div></td><td class = "main"><div class = "bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class = "side"><div class = "bevel">lorem</div></td><td class = "side"><div class = "bevel">ipsum</div></td><td class = "main"><div class = "bevel">dolor sit amet, consectetur</div></td></tr>
    <tr><td class = "side"><div class = "bevel">lorem</div></td><td class = "side"><div class = "bevel">ipsum</div></td><td class = "main"><div class = "bevel">dolor sit amet, consectetur</div></td></tr>
</table>

И в своей таблице стилей вы должны использовать что-то вроде этого:

td {
    border: 1px solid #777;
}

.bevel {
    background: url('img.png') top left repeat-x;
    margin: -1px;
    border-top: 1px solid #fbfbfb;
    border-left: 1px solid #fbfbfb;
    border-right: 1px solid #bfbfbf;
    border-bottom: 1px solid #e8e8e8;
}

.side {
    width: 30px;
}

.main {
    width: 170px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Для изображения сделайте его шириной 1 пиксель. Он будет повторяться, чтобы соответствовать ширине ячейки. Если вы хотите, чтобы градиент растягивался по вертикали, вам не повезло. CSS не может масштабировать изображения, а только повторять их. Чтобы сделать фоновое изображение с вертикальным масштабом, вам понадобится либо кошмарная разметка, либо какой-то JavaScript, чтобы заставить его работать.

Чтобы избавиться от супа тегов <div />, вы можете использовать jQuery для вставки тегов, чтобы не загромождать исходный текст. Все, что вам нужно сделать, это добавить вместо этого класс outerBevel в теги <td />, а затем вызвать этот скрипт jQuery (если вы используете jQuery. Я уверен, что другие API JavaScript могут делать аналогичные вещи):

$('.outerBevel').wrapInner('<div class = "bevel"></div>');

Вероятно, вы захотите сделать что-то вроде этого:

table#mytable td {
  border-style: inset;
  border-width: 3px; /* or whatever width you want */
}