如何实现等于号动态的变为一个叉号？如图

Question

自学小白 定位了两个div一个top:50一个top:70，使用transform旋转了两个不同角度的div，发现旋转完后两个div的top不一样。如何实现如图的效果啊？？大神指点下迷津！

Answer 1

用canvas不是更方便？

Answer 2

这样吧<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>.box {
width: 30px;
height: 30px;
position: relative;
}
.box>div {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.box>div:after {
content: '';
position: absolute;
left: 0;
top: 47%;
width: 100%;
height: 1px;
background: #999;
}
.box .one {
transform: rotate(-45deg);
}
.box .two {
transform: rotate(45deg);
}

Answer 3

尝试下，把旋转中心放在div的中心：
div{
       transform-origin: center;
}

Answer 4

旋转之后把top设置成一样的啊。
或者在transform中加入translatey()平移下位置。