CSS 绘制的三角形在直线上不匹配

Question

我尝试将 CSS 绘制的三角形放入表格中，但点不匹配。 （请看附图）

有人知道如何在没有画布的情况下实现它吗？

它也会随着缩放系数的变化而变化。

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

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

Answer 1

您的问题是由于

25px

的边界值不均匀造成的。除以二，它们将四舍五入到最接近的像素。

当您将所有边框值设置为

24px

的倍数而不是

25px

时，您将得到以下代码片段：

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

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

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

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

.gen1 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 384px 192px 0 192px;
  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>