css3-rotate

css3-rotate

旋转时默认是围绕元素的中心点的。可以试试对子元素使用 transform-origin 修改旋转中心为左下角或者右下角。比如右下角 transform-origin: 100% 100%追问貌似不行追答chrome 测试没有缝隙啊，suby的背景改成绿色，body背景改黑色，看的比较明显，没有缝隙的。追问

追答
你看我的效果，chrome浏览器
追问能用我原来的背景色贴一下吗，你这样是用背景色混淆了，根本问题没有解决啊，我上面那个问题只是个测试的，最终是为了做下面这个形状，但是就因为上面的问题，有缺陷

追答这几天回老家了，不好意思，你下面这个图形的效果我一时还真不知道怎么用CSS实现。
是不是可以考虑使用SVG或者图片？追问这个我目前是在测试阶段，只想用css3写，图形已经写出来了，只是不知道为什么会多一条线，然后才会出现我知道上面放上去的那个问题，那个问题解决了，这条线的事也就解决了追答我是没看出来你说的缝隙在哪儿，那个图不清楚吧。
我试了没缝隙么，body背景是黑的，如果有缝隙就是很色么，现在不是黑色的么。追问拜托，你用我的颜色好吗，body背景白色，图案颜色红色，这个问题我在第三次追问时就说过了追答那个露出的红线是吧，难道是旋转后计算的误差？
就测试的这个矩形可以加大子元素的尺寸来解决。
如下
.y .suby, .y1 .suby {
    width: 202px;
    height: 101px;
    background: #FFffff;
    position: absolute;
    bottom: -1px;
    left: -1px;
}

Sorry，不知道这个问题的出现原因，帮不了你了。