主页 / 问题 / 700632
Accepted
Egor Trutnev
Asked:2020-08-01 22:06:31 +0000 UTC2020-08-01 22:06:31 +0000 UTC

使用 css 的表格单元格的倾斜阴影

  • 772

有必要使用 css 对表格的单元格（单元格）进行倾斜孵化，以便调整单元格大小不会影响单元格之间难看的接缝的外观。

在Excel中实现了类似的东西

在此处输入图像描述

试图这样做

table {
width:400px
}
.hatching-red {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, red 49.9%, red 60%, rgba(0, 0, 0, 0) 60% ), linear-gradient(45deg, red 10%, rgba(0, 0, 0, 0) 10% );
    background-size: 0.5em 0.5em
}
.hatching-green {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, green 49.9%, green 60%, rgba(0, 0, 0, 0) 60% ), linear-gradient(45deg, green 10%, rgba(0, 0, 0, 0) 10% );
    background-size: 0.5em 0.5em
}
<table>
   <tr>
    <td class="hatching-red">1</td>
    <td class="hatching-green">2</td>
   </tr> 
</table>

看起来不错

在此处输入图像描述

但是，在更改比例时，您会注意到线条的曲率和单元格之间的不一致。

在此处输入图像描述

在此处输入图像描述

如何解决这个问题呢？也许有最正确的选择。我会很高兴任何例子。

html

1 个回答

  1. Best Answer

    尝试使用 background-attachment: fixed;此属性导致背景坐标不是从特定元素计算，而是从整个页面计算。

    table {
  width: 400px;
  border-spacing: 0;
}

.hatching-red {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, red 49.9%, red 60%, rgba(0, 0, 0, 0) 60%) 
              fixed,
              linear-gradient(45deg, red 10%, rgba(0, 0, 0, 0) 10%) 
              fixed;
  background-size: 0.5em 0.5em
}

.hatching-green {
  background: linear-gradient(45deg, rgba(0, 0, 0, 0) 49.9%, green 49.9%, green 60%, rgba(0, 0, 0, 0) 60%) 
              fixed,
              linear-gradient(45deg, green 10%, rgba(0, 0, 0, 0) 10%) 
              fixed;
  background-size: 0.5em 0.5em
}
    <table>
  <tr>
    <td class="hatching-red">1</td>
    <td class="hatching-green">2</td>
  </tr>
</table>

    • 7

相关问题