Question

我想要一个带css的白色斜条纹。我尝试了一些东西，但我没有尝试。我也会把链接放在这里，你可以看看。

有没有人可以帮助我？

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper-section-one editable">
  <tbody>
    <tr>
      <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
          <tbody>
            <tr>
              <td>
                <table width="300" border="0" cellspacing="0" cellpadding="0" align="left" style="background: black; outline: none; outline-offset: 2px; border: 10px solid white; height: 90px;
  background-image: linear-gradient(to bottom right, black, black 50%, white 50%, white); " class="wrapper-section-one editable bg-editable" data-selector="table.bg-editable">
                  <tbody>
                    <tr>
                      <td height="50">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align:center;">

                        <img src="images/blank.gif" width="1" height="27" alt="" title="">

                      </td>
                    </tr>
                    <tr>
                      <td height="20">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size:14px;color:#ffffff;text-transform:uppercase;text-align:center;font-weight:bold;">
                        &nbsp;
                        <br/>
                      </td>
                    </tr>
                    <tr>
                      <td height="10">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size:13px;color:#ffffff;text-transform:capitalize;text-align:center;">
                        &nbsp;
                      </td>
                    </tr>
                    <tr>
                      <td height="50">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table width="300" border="0" cellspacing="0" cellpadding="0" align="right" style="background: #c11717; outline: none; outline-offset: 2px; border: 10px solid white;" class="wrapper-section-one editable bg-editable" data-selector="table.bg-editable">
                  <tbody>
                    <tr>
                      <td height="50">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align:center;">

                        <img src="images/mark.png" width="17" height="27" alt="" style="display:initial;" data-selector="div.editable img">

                      </td>
                    </tr>
                    <tr>
                      <td height="20">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size:14px;color:#ffffff; text-transform:uppercase;text-align:center;font-weight:bold;">
                        Kop 1
                      </td>
                    </tr>
                    <tr>
                      <td height="10">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size:13px;color:#ffffff; text-transform:capitalize;text-align:center;">
                        Tekst 1
                      </td>
                    </tr>
                    <tr>
                      <td height="50">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <table width="300" border="0" cellspacing="0" cellpadding="0" align="left" style="background: #c11717; outline: none; outline-offset: 2px; border: 10px solid white;" class="wrapper-section-one editable bg-editable" data-selector="table.bg-editable">
                  <tbody>
                    <tr>
                      <td height="50">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align:center;">

                        <img src="images/icon_date.png" width="27" height="27" alt="" style="display:initial;" data-selector="div.editable img">

                      </td>
                    </tr>
                    <tr>
                      <td height="20">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size:14px;color:#ffffff; text-transform:uppercase;text-align:center;font-weight:bold;">
                        Kop 2
                      </td>
                    </tr>
                    <tr>
                      <td height="10">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size:13px;color:#ffffff; text-transform:capitalize;text-align:center;">
                        Tekst 2
                      </td>
                    </tr>
                    <tr>
                      <td height="50">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table width="300" border="0" cellspacing="0" cellpadding="0" align="right" style="background: black; outline: none; outline-offset: 2px;border: 10px solid white;" class="wrapper-section-one editable bg-editable" data-selector="table.bg-editable">
                  <tbody>
                    <tr>
                      <td height="50">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="text-align:center;">

                        <img src="images/wclock.png" width="24" height="27" alt="" style="display:initial;" data-selector="div.editable img">

                      </td>
                    </tr>
                    <tr>
                      <td height="20">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size:14px;color:#ffffff;text-transform:uppercase;text-align:center;font-weight:bold;">
                        Kop 3
                      </td>
                    </tr>
                    <tr>
                      <td height="10">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                    <tr>
                      <td style="font-size:13px;color:#ffffff;text-transform:capitalize;text-align:center;">
                        Tekst 3
                      </td>
                    </tr>
                    <tr>
                      <td height="50">
                        <img src="images/blank.gif" width="1" height="1" alt="" title="">
                      </td>
                    </tr>
                  </tbody>
                </table>

              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

这是使用线性渐变CSS方法的图像副本。需要的标记少得多：）

＆＃13;

div#wrapper {
  float: left;
  width: 220px;
  height: 220px;
  margin: 0px;
}

div#wrapper div {
  width: 100px;
  height: 100px;
  float: left;
  background: red;
  margin: 0px 10px 10px 0px;
}

div#wrapper #d1 {
  background-image: repeating-linear-gradient(145deg, black, black 60px, white 60px, white 80px);
}

div#wrapper #d4 {
  background: black;
}

＆＃13;

<div id="wrapper">
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
  <div id="d4"></div>
</div>

＆＃13;

Answer 2

以下是我的方法，以获得与示例图片链接完全相同的结果，但它不适用于电子邮件。

＆＃13;

.box {  
  position: relative;
  margin: 0 15px 15px 0;
  width: 100px;
  height: 100px;
  float: left;
}
.cf {
  clear: left;
}
.box--red {
  background-color: #ff0000;
}
.box--black {
  background-color: #000000;
}
.box--split:before {
  content: "";
  position: absolute;
  border-top: 50px solid #000;  
  border-right: 50px solid transparent;
  border-left: 50px solid #000;
  border-bottom: 50px solid transparent;
  box-sizing: border-box;
}
.box--split:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  box-sizing: border-box;
  border-right: 40px solid #000;  
  border-top: 40px solid transparent;
  border-bottom: 40px solid #000;
  border-left: 40px solid transparent;
}

＆＃13;

<div class="box box--split">
</div>
<div class="box box--red">
</div>
<div class="box box--red cf">
</div>
<div class="box box--black">
</div>

＆＃13;

带（内联）CSS的对角线边框线

2 个答案: