here’s an example of updating the code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
width: 100%;
height: 200px;
overflow: hidden;
}
.box {
width: 50%;
}
.box1 {
background-color: red;
position: relative;
}
.box1::after {
content: '';
position: absolute;
right:-100px;
top: -10px;
width: 100px;
background-color: red;
height: 400px;
overflow: hidden;
transform: rotate(-20deg);
}
.box2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">
</div>
<div class="box box2">
</div>
</div>
</body>
</html>
Keep in mind that the values for height, width, right, and top (in .box1::after) are adjusted depending on the height of the parent container (.container).
Also you could fake it, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
.container {
width:90%;
}
.container div{
border: 1px solid red;
padding: 5px;
font-size:12px;
width:100%;
}
input{
width:100%;
border: 1px solid red;
font-size:12px;
padding: 5px;
}
form {
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="container">
<div>
asdasd
</div>
<form action="">
<input type="text" name="foo" />
</form>
</div>
</body>
</html>