Incorrect border rendering when using css transform in Firefox

后端 未结 3 1518
春和景丽
春和景丽 2021-01-15 14:29

I have a simple CSS arrow like this:

.arrow-brown {
    height: 18px;
    width: 18px;
    border-top: 6px solid #39170b;
    border-right: 6px solid #39170b         


        
相关标签:
3条回答
  • 2021-01-15 14:48

    That worked for me:

    transform-style: preserve-3d;
    
    0 讨论(0)
  • 2021-01-15 14:52

    you can give a try to draw the borders via box-shadow or via linear-gradient

    div {
      margin: 20px;
      float: left;
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    .box-shadow {
      height: 68px;
      width: 68px;
      box-shadow: inset -18px 18px #39170b;
    }
    .arrow-brown {
      height: 50px;
      width: 50px;
      border-top: 18px solid #39170b;
      border-right: 18px solid #39170b;
    }
    .gradient {
      height: 68px;
      width: 68px;
      background: linear-gradient(to left, #39170b, #39170b) top right no-repeat, linear-gradient(to top, #39170b, #39170b) top left no-repeat;
      background-size: 18px 100%, 100% 18px;
    }
    th {
      color:red;
      }
    th:last-of-type {
      color:#54A719;
      }
    <table>
      <caption>Tests on rotated shapes</caption>
      <thead>
        <tr>
          <th>border</th>
          <th>box-shadow</th>
          <th>linear-gradient</th>
        </tr>
        <thead>
          <tbody>
            <tr>
              <td>
                <div class="arrow-brown"></div>
              </td>
              <td>
                <div class="box-shadow"></div>
              </td>
              <td>
                <div class="gradient"></div>
              </td>
            </tr>
          </tbody>
    </table>

    http://codepen.io/gcyrillus/pen/GZoKRj

    0 讨论(0)
  • 2021-01-15 14:58

    I had similar issues in Firefox with borders not being rendered correctly when using transform (scale to be specific). Adding a really tiny border-radius solved the issue for me.

    border-radius: 0.01px;
    
    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题