Tell me how to create this element so that it is adaptive? The first thing I tried to do is to arrange it by transforming diva and pseudo-class befo, however, because of absolute positioning, there are spreads between the form and this so-called border.

screen

  • one
    Where is the code? To give a clear answer, you need to have an idea how it was implemented ... - Air
  • And the form position: absolute? - Kirill Korushkin
  • Yes, it was implemented through the absolute - Kr1on1x
  • There is no code, since I do not consider it to be correct, it is not just necessary to edit it, but write normally. - Kr1on1x

1 answer 1

#form{ width: fit-content; padding: 10px; background-color: red; position: absolute; top: 10%; } #form input{ width: 100%; height: 50px; margin: 0 0 10px; } #form:before{ content: ''; width: 30px; height: 103%; background-color: darkred; display: block; position: absolute; left: -30px; top: -6px; transform: skewX(15deg) rotate(15deg); } 
 <div style="float:left;width:10%;height:200px;background-color:gray"></div> <div style="float:left;width:90%;height:200px;background-color:lightgray"> <form id="form"> <input type="text"/> <input type="text"/> </form> </div>

  • Many thanks helped) - Kr1on1x