CSS用光栅填充td

Question

我在HTML + CSS中有以下结构：

您可以在此处查看工作代码段：

table{
    border-collapse: collapse;
}
td{    
    padding:20px;
    border:5px solid black;
}
.red{
    background-color:#F15E66;
}
.yellow{
    background-color:#FFDB64;
}
.orange{
    background-color:#F58326;
}
.blue{
    background-color:#85B1DE;
}

<table>
    <tr>
        <td class="red"></td>
        <td class="yellow"></td>
        <td class="orange"></td>
        <td class="blue"></td>
    <tr>
</table>

现在我需要像这样填充一个方格：

这可能在CSS吗？

Answer 1

您可以使用重复的线性渐变。

table {
    border-collapse: collapse;
}
td {
    padding:44px;
    border:5px solid black;
}
.red {
    background-color:#F15E66;
}
.yellow {
    background-color:#FFDB64;
}
.orange {
    background-color:#F58326;
}
.blue {
    background-color:#85B1DE;
}
.grating{
    background-color:#269;
background-image: repeating-linear-gradient(-45deg, 
        transparent, 
        transparent 10px, 
        rgba(255,255,255,1) 10px, 
        rgba(255,255,255,1) 20px
    );
}

<table>
  <tr>
    <td class="red"></td>
    <td class="yellow"></td>
    <td class="orange"></td>
    <td class="blue"></td>
    <td class="grating"></td>
  </tr>
</table>

Answer 2

使用svg

＆＃13;

＆＃13;

table{
    border-collapse: collapse;
}
td{    
    padding:20px;
    border:5px solid black;
}
.red{
    background-color:#F15E66;
}
.yellow{
    background-color:#FFDB64;
}
.orange{
    background-color:#F58326;
}
.blue{
    background-color:#85B1DE;
}
svg{
    margin-left:-20px;
    margin-top:-21px;
    position:absolute;
}

＆＃13;

<table>
    <tr>
        <td class="red"></td>
        <td class="yellow"></td>
        <td class="orange"><svg width="40" height="40"><path d="m 0 20 l 20 -20 20 0 -40 40 0 20 60 -60" stroke="black" stroke-width="5" fill="none"/>
            </svg>
        </td>
        <td class="blue"></td>
    <tr>
</table>
        
       

＆＃13;

＆＃13;

＆＃13;