Diagonal border line with (inline) CSS

Question

I would like to have a white diagonal stripe with css. I have tried something but I don't get it work. I will put the link in here as well so you can have a look.

Is there anyone who can help me out?

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

Given the more elegant answer is not generating a triangle, but instead using a repeating-linear-gradient, I don't think this question is a duplicate — mayersdesign, Apr 04 '17 at 10:02
@Zen I don't think you can use gradient in emails and you cannot achieve that through pure css for emails as most email clients don't render it correctly. Here is good table on all the css properties for email use https://www.campaignmonitor.com/css/ — Web pundit, Apr 04 '17 at 10:21
@Webpandit I was not aware of that. I will have a look, thank you! — Zen, Apr 04 '17 at 10:34

mayersdesign · Accepted Answer · 2017-04-04T10:09:14.557

0

Here's a copy of your image using the linear-gradient CSS approach. MUCH less markup required :)

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>

edited Apr 04 '17 at 10:09

answered Apr 04 '17 at 10:00

mayersdesign

5,062
4
35
47

This is what I call Maestro! Thanks mate! :) – Zen Apr 04 '17 at 10:13
Thanks very much, I have also flagged the question as non-duplicate. Thanks again. – mayersdesign Apr 04 '17 at 10:14
Question doesn't mention emails? Plus is already marked correct, and the OP called me "Maestro" so that has to be the most pointless and pedantic downvote I ever had! – mayersdesign Apr 04 '17 at 10:46
read comments from the OP `It's for e-mail :) it would be very ugly for web page` – dippas Apr 04 '17 at 11:05
Comment wasn't there when I answered. And (listen) - It's accepted already by a happy OP! Move along! :) – mayersdesign Apr 04 '17 at 11:16
yes, OP only confirmed it was for email after you posted the Answer. I asked that question before you did but OP responded late – Web pundit Apr 04 '17 at 11:17
@Webpandit Thanks mate. It was insightful of you to think it was for an email (because of the tables) by the way - I thought he'd chosen a table layout simply because of the grid/square structure. – mayersdesign Apr 04 '17 at 11:21

score 0 · Answer 2 · answered Apr 04 '17 at 10:24

Here is my approach to get the result exactly as in your example image link, but it doesn't work for emails.

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

Interesting how yours aliases less than mine :) – mayersdesign Apr 04 '17 at 14:51 — mayersdesign, Apr 04 '17 at 14:51

Diagonal border line with (inline) CSS

2 Answers2