在html或css中倾斜的对角线？

Question

我想做一个像这样的表

是否可以在表格中添加倾斜的对角线边框？

Answer 1

基于CSS3线性渐变解决方案,除了角度不是硬编码:

table:nth-of-type(1) td {
  background-image: linear-gradient(
    to top right,
    white 48%,
    black,
    white 52%
  );
}
table:nth-of-type(2) td {
  background-image: linear-gradient(
    to top right,
    papayawhip calc(50% - 1px),
    black,
    papayawhip calc(50% + 1px)
  );
}
/* for testing */
table {
  border-collapse: collapse;
  margin-top: 1em;
  margin-bottom: 1em;
}
td:nth-child(odd) {
  width: 10em;
}
td:nth-child(even) {
  width: 20em;
}

<table border="1">
  <tbody>
    <tr>
      <td>Narrow</td>
      <td>Wide</td>
    </tr>
    <tr>
      <td>Narrow</td>
      <td>Wide</td>
    </tr>
  </tbody>
</table>
<table border="1">
  <tbody>
    <tr>
      <td>Narrow</td>
      <td>Wide</td>
    </tr>
    <tr>
      <td>Narrow</td>
      <td>Wide</td>
    </tr>
  </tbody>
</table>

Answer 2

另一种方法是使用SVG，因为它可以轻松缩放到容器的大小。

例子 ：

div {
  position: relative;
  display:inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}
.l{width:200px;}
.xl{width:300px;}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="s">
  <svg viewBox="0 0 10 10" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
  </svg>
</div>
<div class="l">
  <svg viewBox="0 0 10 10" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
  </svg>
</div>
<div class="xl">
  <svg viewBox="0 0 10 10" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
  </svg>
</div>

Answer 3

您可以使用以下方法之一产生这种倾斜的内边框效果，但这两种方法都需要根据表格单元格的高度和宽度调整角度（倾斜/渐变）。

注意：当单元格尺寸是动态/自动时，这可能不是最好的选择（而且我也想不出任何其他更好的选择），因为角度需要修改。

选项 1：对伪元素使用倾斜变换

table,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
}
td {
  display: inline-block; /* doesn't seem to work in FF without this */
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px; /* for vertical centering */
}
td:after {
  position:absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border: 1px solid red;
  -webkit-transform: skewX(63deg);
  -moz-transform: skewX(63deg);
  transform: skewX(63deg);
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  transform-origin: left bottom;
}

<table>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
</table>

选项2：在背景中使用线性渐变（IE9及更低版本不支持）

table,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
}
td {
  background: -webkit-linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%);
  background: -moz-linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%);
  background: linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%);
  width: 50px;
  height: 50px;
}

<table>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
</table>