I have explored numerous options while searching for a way to create a responsive, full-width trapezoid with a gradient but have come up short. Using SVG, I was able to get close to the desired shape, but encountered problems when the trapezoid's dimensions changed. The shrinking and stretching affected the angles and overall appearance of the shape:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
body,
html {
/* background:red; */
}
.trap-container {
position: relative;
width: 100%;
}
.trap-container svg {
position: absolute;
}
.trap-content {
position: relative;
color: black;
padding: 40px 20px;
}
</style>
</head>
<body>
<div class="trap-container">
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="yellow" stop-opacity="1" />
<stop offset="100%" stop-color="orange" stop-opacity="1" />
</linearGradient>
</defs>
<polygon points="0,10 100,0 100,100 0,90" fill="url(#grad1)">
</polygon>
</svg>
<div class="trap-content">
This DIV works fine with minimal content. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
</div>
</div>
<br />
<br />
<div class="trap-container">
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="yellow" stop-opacity="1" />
<stop offset="100%" stop-color="orange" stop-opacity="1" />
</linearGradient>
</defs>
<polygon points="0,10 100,0 100,100 0,90" fill="url(#grad1)">
</polygon>
</svg>
<div class="trap-content">
Stretching out the trapezoid causes the angles to be distorted due to their relative positioning. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
here. Testing some content here.
</div>
</div>
</body>
</html>Is it possible to position a point in an SVG polygon relative to another point? For example, setting the y position of one point to be 10 pixels lower than another. While I believe this could be achieved with JavaScript, I am seeking a solution without it.