対角線の境界線（インライン）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

これは私がMaestroと呼ぶものです！ありがとう！ :) – 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

答えて

関連する問題