html - 全宽 div 旋转不占用最大宽度

Question

我正在尝试制作一个全宽旋转标题，但问题是当我在标题的右 Angular 旋转它时，它有一个空格。我做了一个 jsfiddle 来更好地理解我的问题。我正在尝试数小时和数小时的许多方法，但没有任何效果。谢谢

#header {
background: rgba(255,0,0,0.7);
height: 150px;
transform: rotate(356deg) ;
-webkit-transform: rotate(356deg) ;
-moz-transform: rotate(356deg) ;
-o-transform: rotate(356deg) ;
-ms-transform: rotate(356deg) ;
-webkit-transform-origin: bottom left;}

http://jsfiddle.net/SAVw6/

Answer 1

我相信这就是你想要的:

fiddle :http://jsfiddle.net/SAVw6/5/

HTML:

<div id="container"><div id="header"></div><div>

CSS:

#header {
    background: rgba(255,0,0,0.7);
    height: 150px;
    transform: rotate(356deg) ;
    -webkit-transform: rotate(356deg) ;
    -moz-transform: rotate(356deg) ;
    -o-transform: rotate(356deg) ;
    -ms-transform: rotate(356deg) ;
    -webkit-transform-origin: bottom left;
    width: 130%;
    margin-left: -20%;
}
#container {
    overflow: hidden;
    width: 100%;
}

• 容器防止任何多余的水平滚动
• 宽度扩展到 100% 以使其继续向右和向左延伸。
• 将 margin-left 设置为负值，以便它继续向左而不是仅向右。

• 您的 -webkit-transform-origin: bottom left; CSS 代码专门针对 Chrome 而不是其他浏览器。对于跨浏览器支持，您可以使用:

  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;