CSS Drawn Triangles are not matching in line

Question

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.

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

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

Rene van der Lende · Accepted Answer · 2023-11-20 23:26:47Z

0

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>

edited Nov 20, 2023 at 23:26

answered Nov 20, 2023 at 0:11

Rene van der Lende

5,3912 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KIKO Software Over a year ago

It's a nice idea, but rounding to pixels hasn't happened for a long time. I can still see miss-aligned triangles at some zoom levels. I think the whole idea of relying on the borders for this is flawed, but I don't have an alternative.

Rene van der Lende Over a year ago

@KIKOSoftware, I see what you mean. Using CSS clip-path: polygon will probably work.

ChristophDaniel Over a year ago

As @KIKOSoftware already said, changing to even values do not fix the problem. But Thank you anyways!

ChristophDaniel Over a year ago

I tried the suggestion from @RenevanderLende and it works like a charme. { width: 48px; height: 48px; background: green; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); margin: auto; transform: rotate(180deg); }

Collectives™ on Stack Overflow

CSS Drawn Triangles are not matching in line

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related