如何 css 根据视口大小旋转一个角度

Question

我正在尝试根据 CSS 中的视口宽度定义元素的旋转。

这里有一个“硬”“变换：旋转（-3.4deg）；” :

https://i.postimg.cc/3NqY2Hzy/rotate-1.jpg

我希望在较小的视口宽度上有更多角度：

https://i.postimg.cc/SQHKX64g/rotate-2.jpg

我尝试了 calc(12deg * 5vw)（以及任何其他视口的大小变量单位）之类的东西，但 none 似乎与角度单位兼容。我可以在 javascript 中完成，但我担心在慢速计算机/连接上加载页面时会出现严重故障。我想避免触及顶部和底部分隔线，它们是由 wordpress 的主题生成的。

编辑：我尝试动态旋转的元素是包含 3 个文本的元素。

Answer 1

如果您忘记了角度，转而使用 clip-path，您可以在您的元素上添加几个伪元素，这些伪元素的背景为深绿色和浅绿色。

由于 clip-path 是根据百分比而不是实际角度定义的，因此它们会自动调整到不同的视口，而无需媒体查询：

div {
  position: relative;
  width: 100vw;
  height: 30vw;
  display: inline-block;
}

div::before,
div::after {
  content: '';
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div::before {
  z-index: -2;
  background-color: lightgreen;
  clip-path: polygon(0 0, 100% 0%, 0 35%, 0 100%, 100% 70%, 100% 95%, 0 100%);
}

div::after {
  z-index: -1;
  background-color: green;
  clip-path: polygon(0 0, 100% 0, 0 25%, 0 100%, 100% 75%, 100% 100%, 0 100%);
}

<div></div>

如何 css 根据视口大小旋转一个角度

How to css rotate with an angle depending on viewport size

css

rotation

viewport-units