CSS旋转div 10deg全宽

Question

我找到了following Website。 特节：半边的社会新闻。

我想知道如何在整个宽度上获得旋转的div（我认为大约10度）。 是否有可能做出响应？所以我可以在手机上使用旋转的div？ 我不适合旋转div。我怎么能用css做到这一点？

我试过这个：

<div class="container"></div>

使用以下css的Ans：

.container {
   transform: rotate(10deg);
   width: 100%;
   height: 200px;
   background: red;
}

但容器不是全宽。

Answer 1

没有变换就可以工作。只有CSS-Shapes。转换也是可能的。在A Collection of Separator Styles上还有许多其他分隔符样式。

＆＃13;

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}

.outer {
  position: relative;
}

.outer::before {
  position: absolute;
  top: 0px;
  
  border-top: solid 40px #ffffff;
  border-right: 100vw solid rgba(0,0,0,0);
  
  content: '';
}

.outer::after {
  bottom: 0px;
  position: absolute;
  
  border-bottom: solid 40px #ffffff;
  border-left: 100vw solid rgba(0,0,0,0);
  
  content: '';
}


.inner {
  height: 200px;
  padding: 60px 1em;
  
  background: #ccc;
}

＆＃13;

<div class="outer">
  <div class="inner">…</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

#div {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

使用负值会逆时针旋转。

Source

Answer 3

HTML

<div class="rotated"></div>

CSS

.rotated {
    transform: rotate(10deg)
}

如果这是你在说什么，它不是一个旋转的div。整个幻灯片部分只是一个图像。

更新： 它在IE9中得到支持。参考：http://caniuse.com/#search=transform%3A%20rotate

Answer 4

除了通过旋转进行转换之外，您还可以将其缩放，并将div父级的溢出样式设置为隐藏 - 如果放大到足够，则应覆盖整个宽度。

div.parent {
  overflow: hidden;
  height: 100vh;
  background-color: lightblue;
}

div.container {
  margin-top: 42px;
  transform: rotate(10deg) scale(1.2);
  background-color: red;
  height: 100px;
}

<div class="parent">
  <div class="container"></div>
</div>