Je viens de commencer à entrer dans le HTML et le CSS, et je veux créer un design qui implique des parallélogrammes et des redimensionnements dynamiques. Je veux quatre parallélogrammes, chacun partant du haut puis passant à 25%, 50%, 75% et 100%, et se chevauchant. Le résultat est ce qui ressemble à un seul parallélogramme mais avec quatre sections (celles-ci porteront des balises a pour se lier à d'autres parties du site).Comment faire pour que deux parallélogrammes se chevauchent parfaitement et se redimensionnent dynamiquement en HTML?
Maintenant, tout va bien jusqu'à ce que vous traitiez avec la marge droite et le biais. La partie supérieure droite de chaque parallélogramme doit s'asseoir au même endroit et porter le même angle vers le bas pour que cette astuce fonctionne. Malheureusement, parce que la marge de droite est la distance entre le centre du parallélogramme (pas le haut) et le bord droit, c'est difficile - ni une distance fixe ou relative pour cette mesure ne marche. Le problème principal est que la marge de droite devrait être fonction de la hauteur verticale de l'écran - ce serait possible avec JQuery, mais je voudrais essayer une solution HTML ou CSS pure.
code
est ici un code de base illustrant la question:
<!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>
Si vous pouvez obtenir les deux parallélogrammes rester alignés, et remplissent encore l'écran verticalement quelle que soit la taille (non Comme je l'ai dit à propos du redimensionnement horizontal, je vais le faire pendre du côté droit de la page - c'est assez bon pour l'effet que je veux), alors vous êtes un héros.
Personnellement, je vois trois possibilités:
- une certaine façon incroyable d'obtenir que cela fonctionne juste avec la marge droite correcte, la largeur, la hauteur et combo inclinaison
- Plonk chaque parallélogramme dans un certain récipient, et Dites-lui qu'il doit rester entièrement à l'intérieur du conteneur. Scie sauteuse - fabriquez des barres horizontales, puis faites des chevauchements avec des parallélogrammes blancs sur chaque taille pour créer la forme désirée. J'ai réussi à faire fonctionner ceci, mais je suis désireux de faire une solution plus simple - cette technique est ennuyante si vous voulez réellement que le parallélogramme se trouve en face de quelque chose.
Un exemple de code aiderait les gens à répondre à votre question. –
Bon point, j'en posterai quand j'en serai capable. – andrewb
@Dioedeus J'ai ajouté du code maintenant – andrewb