Search code examples
htmlcssborderdrawtriangle

CSS Drawn Triangles are not matching in line

I tried to put CSS-drawn triangles in a table, but the points are not matching. (Please find attached picture)

Does anybody know how to achieve it without a canvas?

It also changes with the zoom factor.

==========================================================================================================================================

Triangle

.gen5 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 50px 25px 0 25px;
  border-color: #eb1d36 transparent transparent transparent;
  margin: auto;
}

.gen4 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 50px 25px 0 25px;
  border-color: #eb1d36 transparent transparent transparent;
  margin: auto;
}

.gen3 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 100px 50px 0 50px;
  border-color: #eb1d36 transparent transparent transparent;
  margin: auto;
}

.gen2 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 200px 100px 0 100px;
  border-color: #eb1d36 transparent transparent transparent;
  margin: auto;
}

.gen1 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 400px 200px 0 200px;
  border-color: #eb1d36 transparent transparent transparent;
  margin: auto;
}
<div>
  <table id="designer" style="margin:0; padding 0; border-spacing:0px; border: 1px solid black;">
    <tr>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <td style="margin:0; padding: 0">
        <div class="gen5"></div>
      </td>
      <tr>
        <tr>
          <td colspan=2 style="margin:0; padding: 0">
            <div class="gen4"></div>
          </td>
          <td colspan=2 style="margin:0; padding: 0">
            <div class="gen4"></div>
          </td>
          <td colspan=2 style="margin:0; padding: 0">
            <div class="gen4"></div>
          </td>
          <td colspan=2 style="margin:0; padding: 0">
            <div class="gen4"></div>
          </td>
          <td colspan=2 style="margin:0; padding: 0">
            <div class="gen4"></div>
          </td>
          <td colspan=2 style="margin:0; padding: 0">
            <div class="gen4"></div>
          </td>
          <td colspan=2 style="margin:0; padding: 0">
            <div class="gen4"></div>
          </td>
          <td colspan=2 style="margin:0; padding: 0">
            <div class="gen4"></div>
          </td>
          <tr>
            <tr>
              <td colspan=4 style="margin:0; padding: 0">
                <div class="gen3"></div>
              </td>
              <td colspan=4 style="margin:0; padding: 0">
                <div class="gen3"></div>
              </td>
              <td colspan=4 style="margin:0; padding: 0">
                <div class="gen3"></div>
              </td>
              <td colspan=4 style="margin:0; padding: 0">
                <div class="gen3"></div>
              </td>
              <tr>
                <tr>
                  <td colspan=8 style="margin:0; padding: 0">
                    <div class="gen2"></div>
                  </td>
                  <td colspan=8 style="margin:0; padding: 0">
                    <div class="gen2"></div>
                  </td>
                  <tr>
                    <tr>
                      <td colspan=16 style="margin:0; padding: 0">
                        <div class="gen1"></div>
                      </td>
                      <tr>
  </table>
</div>

Solution

  • Your issue is due to the uneven border values of 25px. Divided by two they will get rounded up to the nearest pixel causing the extra shift of 1 pixel each side.

    When you make all border values a multiplification of 24px instead of 25px you get the following snippet:

    /* Update, condensed the original CSS */
#designer { margin:0; padding: 0; border-spacing: 0px; border: 1px solid black }
td        { margin:0; padding: 0 }

[class ^= "gen"] { /* all classes starting with "gen" */
  width : 0px;
  height: 0px;
  border-style: solid;
  border-color: #eb1d36 transparent transparent transparent;
  margin: auto;
}

.gen5 { border-width:  48px  24px 0  24px }
.gen4 { border-width:  48px  24px 0  24px }
.gen3 { border-width:  96px  48px 0  48px }
.gen2 { border-width: 192px  96px 0  96px }
.gen1 { border-width: 384px 192px 0 192px }
    <div>
    <table id="designer">
        <tr>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
            <td>
                <div class="gen5"></div>
            </td>
        <tr>
        <tr>
            <td colspan=2>
                <div class="gen4"></div>
            </td>
            <td colspan=2>
                <div class="gen4"></div>
            </td>
            <td colspan=2>
                <div class="gen4"></div>
            </td>
            <td colspan=2>
                <div class="gen4"></div>
            </td>
            <td colspan=2>
                <div class="gen4"></div>
            </td>
            <td colspan=2>
                <div class="gen4"></div>
            </td>
            <td colspan=2>
                <div class="gen4"></div>
            </td>
            <td colspan=2>
                <div class="gen4"></div>
            </td>
        <tr>
        <tr>
            <td colspan=4>
                <div class="gen3"></div>
            </td>
            <td colspan=4>
                <div class="gen3"></div>
            </td>
            <td colspan=4>
                <div class="gen3"></div>
            </td>
            <td colspan=4>
                <div class="gen3"></div>
            </td>
        <tr>
        <tr>
            <td colspan=8>
                <div class="gen2"></div>
            </td>
            <td colspan=8>
                <div class="gen2"></div>
            </td>
        <tr>
        <tr>
            <td colspan=16>
                <div class="gen1"></div>
            </td>
        <tr>
    </table>
</div>