antd-mobile modal组件里面给元素添加border，并且把元素旋转45度之后，border直角处会出现间隙，safari或者ios手机有问题，有人遇到过，怎么解决吗？

Question

antd-mobile modal弹窗组件里面给元素添加border边框，并且把元素旋转45度之后，border直角处会出现间隙
safari或者ios手机有问题

例如这里，勾是用border写的，旋转了45度就出现这个问题

Answer 1

是旋转导致的DOM渲染问题, 这里建议勾还是使用SVG或者图片兼容性更高
或者用伪元素模拟这种方式可以保证边框始终在正常的位置，不会因为旋转元素而导致渲染问题。具体可以在旋转的元素内部添加一个伪元素，然后给伪元素设置边框样式，这样就可以模拟出旋转元素的边框效果。示例代码如下：

    .modal-content {
      width: 100px;
      height: 100px;
      background-color: aqua;
      transform: rotate(45deg);

    }
.modal-content:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #ccc;
box-sizing: border-box;
}

2. 给旋转的元素设置CSS属性transform-style: preserve-3d;，并且给旋转元素的父级元素添加-webkit-transform: translate3d(0, 0,0);属性。这种方式可以在不使用伪元素的情况下解决边框渲染问题。示例代码如下：

.modal-content {
transform-style: preserve-3d;
}

.modal {
-webkit-transform: translate3d(0, 0, 0);
}

3. 使用 outline
   

    .modal-content {
      transform: rotate(45deg);
      outline: 1px solid #ccc;
      width: 100px;
      height: 224px;
      background-color: aqua;
    }