enter image description here It is necessary to make such a block with a beveled corner. The angle of inclination can be changed in the admin panel and when the level of inclination changes, the text should also bend ..

  • Can you see the code? Not to mention js ... - ANYWAYCODE
  • I would just like to get some advice on how to implement this. I first made just a white triangle, which lies on top. Yes, it is normal to adjust the angle of inclination, but the text does not affect in any way. I would at least just in theory understand in which direction to move - Elena Leshchenko

1 answer 1

Here the matryoshka, the first block of which is overflow:hidden , has another block in it which is rotated through the transform: rotate(-5deg); and inside it is a block with text.

 function rotate(deg){ document.querySelector('div.block > div') .style.transform = `translate(-50%, -50%) rotate(${deg}deg)`; } 
 body { margin:0; overflow-x:hidden; } div.block { position:absolute; height:170px; width:100%; overflow:hidden; } div.block > div { position: absolute; top: calc(50% - 130px); left: 50%; width: 200vw; height: 350px; transform: translate(-50%, -50%) rotate(-5deg); text-align:center; background-color:wheat; } div.block > div > div { position: absolute; bottom: 0; left:50%; font-size:30px; font-family:arial; transform: translate(-50%, 0) } 
 <input type="range" from="0" to="100" value="0" onmousemove="rotate((this.value/100-0.5)*10)"/> <div class="block"> <div> <div>Hello</div> </div> </div>