Я только начал входить в HTML и CSS, и я хочу создать дизайн, который предполагает параллелограммы и динамически изменяет размеры. Я хочу четыре параллелограмма, каждый из которых начинается сверху, а затем переходит на 25%, 50%, 75% и 100% и перекрывается. Результатом является то, что выглядит как один параллелограмм, но с четырьмя разделами (они будут иметь теги для ссылки на другие части сайта).Как я могу получить два параллелограмма для полного совпадения и динамического изменения размера в HTML?
Теперь все в порядке, пока вы не справитесь с правильным краем и перекосом. Верхний правый угол каждого параллелограмма должен сидеть в одном месте и нести тот же угол вниз, чтобы этот трюк работал. К сожалению, поскольку правый край - это расстояние от центра параллелограмма (не сверху) до правого края, это сложно - ни фиксированное, ни относительное расстояние для этой меры не работает. Основная проблема заключается в том, что правильный запас должен быть функцией вертикальной высоты экрана - это было бы возможно с помощью JQuery, но я бы хотел попробовать чистое решение HTML или CSS.
Код
Вот некоторые основные код, иллюстрирующий проблему:
<!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>
Если вы можете получить два параллелограмма, чтобы остаться построились, и до сих пор заполняют экран вертикально, независимо от размера (не как суетятся о горизонтальном изменении размера, я заставлю его висеть на правой стороне страницы - это достаточно хорошо для эффекта, который я хочу), тогда вы герой.
Лично я вижу три возможности:
- Некоторые удивительным способ получения этого работать только с правильным Маржей правой, шириной, высотой и косыми комбо
- Плонка каждого параллелограмм внутри некоторого контейнера, и скажите, что он должен оставаться полностью внутри контейнера.
- Jigsaw - сделайте горизонтальные полосы, затем наложите белые параллелограммы на каждый размер, чтобы создать желаемую форму. Мне удалось заставить это работать, но я стараюсь сделать более простое решение - эта техника раздражает, если вы действительно хотите, чтобы параллелограмм сидел перед чем-то.
Некоторые примеры кода помогут людям ответить на ваш вопрос. –
Хорошо, я отправлю некоторые, когда смогу. – andrewb
@Dioedeus Я добавил код сейчас – andrewb