How to css rotate with an angle depending on viewport size-CodePudding

I'm trying to define a rotation of an element depending on viewport width in CSS.

Here with a "hard" "transform: rotate(-3.4deg);" :

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

I'd like here more angle on smaller viewport width :

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

I tried things like calc(12deg * 5vw) (and any other viewport's size variables units) but none seem compatible with an angle unit. I could do it in javascript but I'm afraid it would show a bad glitch at page loading on slow computers / connections. I would like to avoid touching to top and bottom dividers, they are generated by a wordpress' theme.

Edit : The element I'm trying to dynamically rotate is the one containing the 3 texts.

CodePudding user response：

If you forget angles but turn to using clip-path you can have a couple of pseudo elements on your element which have backgrounds one of darker and one of lighter green.

As the clip-paths are defined in terms of the percentage amounts rather than actual angles they automatically adjust to different viewports without the need for media queries:

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>