对角边框线（内联）CSS

我想用css做一个白色斜条纹。我尝试了一些东西，但我没有得到它的工作。我会把链接放在这里，以便你可以看看。对角边框线（内联）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>

来源

2017-04-04 Zen

你必须使用一个表？ – mayersdesign

这是为html电子邮件或网页？ – Webpandit

鉴于更优雅的答案是不产生一个三角形，而是使用重复线性渐变，我不认为这个问题是重复的 – mayersdesign

-1

下面是用线性渐变CSS方法图像的副本。需要少得多的标记:)

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; 
 
}

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

来源

2017-04-04 10:00:48 mayersdesign

这就是我所说的大师！谢了哥们！ :) – Zen

非常感谢，我也标记为非重复的问题。再次感谢。 – mayersdesign

这不会在电子邮件中工作 – dippas

这里是我的方法准确地获得结果作为你的榜样形象的联系，但它并不适用于电子邮件工作。

.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; 
 
}

<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>

来源

2017-04-04 10:24:58 Webpandit

看起来非常好！这将被肯定使用！ :) – Zen

有趣的是你的别名比我的更少:) – mayersdesign

对角边框线（内联）CSS

回答

相关问题