Recently delving into the world of HTML and CSS, I've set my sights on designing something unique involving parallelograms that adjust dynamically. My vision includes four overlapping parallelograms starting from the top at 25%, 50%, 75%, and finally 100%, creating the illusion of a single shape with distinct sections that will be linked to various parts of the website using a-tags.
All was going well until I encountered the challenge of maintaining consistency in right margin and skew angles. The top-right corners of each parallel still need to align perfectly for the desired effect. However, determining the correct right margin proved tricky since it should ideally depend on the vertical height of the screen rather than fixed or relative distances. While JQuery could solve this issue, I am committed to finding a pure HTML or CSS solution.
Code
Below is some basic code illustrating the problem:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
html,
body {
height:100%;
width:100%; }
div.parallelogram {
position:absolute;
top:0;
right:0;
-moz-transform:skew(-20deg);
-o-transform:skew(-20deg);
-webkit-transform: skew(-20deg); }
div#parallelogram1 {
height:100%;
width:20%;
background-color:#AAA;
z-index:10; margin-right:100px; }
div#parallelogram2 {
height:50%;
width:20%;
background-color:#CCC;
z-index:20;
margin-right:55px; }
</style>
</head>
<body>
<div class="parallelogram" id="parallelogram1"></div>
<div class="parallelogram" id="parallelogram2"></div>
</body>
If you can figure out how to align two parallelograms while ensuring they fill the vertical screen space irrespective of its size (horizontal resizing isn't a priority), then you're certainly a hero.
Here are three approaches I'm considering:
- Finding a clever combination of margin-right, width, height, and skew to make it work seamlessly
- Encasing each parallelogram inside a container and specifying that it must remain within those boundaries
- Utilizing a jigsaw method by layering white parallelograms over horizontal bars to achieve the desired shape, though this technique proves cumbersome when trying to overlap images behind them