елемент1 над елементом2 который над елементом3 но под элементом1

@vooduq · Регистрация: 06.06.2013

Author24 — интернет-сервис помощи студентам

такое вообще по моему нереально?
с помощью z-index или как

красный квадрат

елемент1 над елементом2 который над елементом3 но под элементом1

HTML5
1
2
3
4
5
6
7
8
9
10
    <aside class="page-open">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </aside>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.page-open
    width: 100%
    height: 100%
    border: 1px solid black
    box-sizing: border-box
    position: relative
    div
        position: absolute
        border: 1px solid black
        top: 50%
        left: 50%
        width: 160px
        height: 160px
    div:nth-child(1)
        background-color: red
        -webkit-transform-origin: 0px 0px
        z-index: 1
        -webkit-transform: rotate(0deg)
    div:nth-child(2)
        background-color: green
        -webkit-transform-origin: 0px 0px
        z-index: 2
        -webkit-transform: rotate(-45deg)
    div:nth-child(3)
        background-color: blue
        -webkit-transform-origin: 0px 0px
        z-index: 3
        -webkit-transform: rotate(-90deg)
    div:nth-child(4)
        background-color: black
        -webkit-transform-origin: 0px 0px
        z-index: 4
        -webkit-transform: rotate(-135deg)
    div:nth-child(5)
        background-color: yellow
        -webkit-transform-origin: 0px 0px
        z-index: 5
        -webkit-transform: rotate(-180deg)
    div:nth-child(6)
        background-color: gray
        -webkit-transform-origin: 0px 0px
        z-index: 6
        -webkit-transform: rotate(-225deg)
    div:nth-child(7)
        background-color: maroon
        -webkit-transform-origin: 0px 0px
        z-index: 7
        -webkit-transform: rotate(-270deg)
    div:nth-child(8)
        background-color: lightgray
        -webkit-transform-origin: 0px 0px
        z-index: 8
        -webkit-transform: rotate(-315deg)

@wLight · 12.05.2014, 00:27

как вариант поделить первый квадрат на 2 треугольника,
один треугольник z-index: 1; другому задать z-index: 9;

как пример (через border треугольники) :

HTML5
1
2
3
4
5
6
7
8
9
10
11
 <aside class="page-open">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </aside>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.page-open {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    box-sizing: border-box;
    position: relative; }
    div {
        position: absolute;
        border: 0px solid black;
        top: 50%;
        left: 50%;
        width: 160px;
        height: 160px;}
    div:nth-child(1) {
        -webkit-transform-origin: 0px 0px;
        z-index: 1;
        -webkit-transform: rotate(0deg);
        width: 0px;
        height: 0px;
        border-width:160px 0px  0px  160px  ;
        border-color: red transparent transparent transparent  ; }
    div:nth-child(2) {
        background-color: green;
        -webkit-transform-origin: 0px 0px;
        z-index: 2;
        -webkit-transform: rotate(-45deg);}
    div:nth-child(3) {
        background-color: blue;
        -webkit-transform-origin: 0px 0px;
        z-index: 3;
        -webkit-transform: rotate(-90deg);}
    div:nth-child(4) {
        background-color: black;
        -webkit-transform-origin: 0px 0px;
        z-index: 4;
        -webkit-transform: rotate(-135deg);}
    div:nth-child(5) {
        background-color: yellow;
        -webkit-transform-origin: 0px 0px;
        z-index: 5;
        -webkit-transform: rotate(-180deg);}
    div:nth-child(6) {
        background-color: gray;
        -webkit-transform-origin: 0px 0px;
        z-index: 6;
        -webkit-transform: rotate(-225deg);}
    div:nth-child(7) {
        background-color: maroon;
        -webkit-transform-origin: 0px 0px;
        z-index: 7;
        -webkit-transform: rotate(-270deg);}
    div:nth-child(8) {
        background-color: lightgray;
        -webkit-transform-origin: 0px 0px;
        z-index: 8;
        -webkit-transform: rotate(-315deg);}
  div:nth-child(9) {
        -webkit-transform-origin: 0px 0px;
        z-index: 9;
        -webkit-transform: rotate(0deg);
        width: 0px;
        height: 0px;
        border-width:160px 0px  0px  160px ;
        border-color: transparent transparent  transparent red;
        }

http://jsbin.com/hagoxido/2/edit

@Excubitor · 12.05.2014, 02:28

wLight, Да, только судя по задаче в

CSS
1
 div:nth-child(9)

должно быть

CSS
1
 z-index: 7;

ну или ниже

@wLight · 12.05.2014, 03:06

Excubitor, при необходимости можно подделать под любой z-index, он по сути там вообще не нужен, приоритет стилей идет с нижней части кода, без z-index картина будет таже

@vooduq · 12.05.2014, 04:30 **[ТС]**

спс бро, туплю не додумался)

Добавлено через 2 минуты
а если тема такая что border-width нельзя, т.к. размеры будут в % можно еще как то придумать с %?
я про border-width, он не принимает %

@wLight · 12.05.2014, 05:23

напиши подробней для чего тебе % и где ты собираешься их использовать

@newJS · 12.05.2014, 07:25

Может быть что gif-картинка по весу окажется соизмерима с вашим огородом, плюс будет работать в старых ослах. Такого типа gif-картинка хорошо упакуется.
Но это зависит от размеров рисунка.

Сообщение от vooduq

можно еще как то придумать с %?

Если размер картинки плавающий, то браузеры неплохо умеют картинку масштабировать.
Я бы попробовал.

@vooduq · 12.05.2014, 16:02 **[ТС]**

этот узор вертится, потом открывается это как интро к сайту, типа как к 007 там может помнишь такая вертуха была в начале фильма, соответственно нужно чтоб эти блоки были 160-200% в зависимости от пропорций экрана
т.е. нужно чтобы они замещали все окно, а со стойкими пикселями на разных разрешениях может быть не достаточно размеров

Добавлено через 39 секунд
в принципе да, возможно гифка, спасибо

@Excubitor · 12.05.2014, 16:05

можно еще использовать media query

@vooduq · 12.05.2014, 16:13 **[ТС]**

слишком сложно

но гифка тоже грабли, хз короче буду думать

@Excubitor · 12.05.2014, 16:16

vooduq, Да ничего особо сложного. Просто прописываете одни и те же стили для разного разрешения экрана, соответственно немного меняя их.

@vooduq · 12.05.2014, 17:12 **[ТС]**

это не гибко будет, бро
+ где-то 10 строк кода это не оправдает цель
а представь что мне еще анимации делать для каждого блока)

@Excubitor · 12.05.2014, 17:16

Ну.. как знаешь...

@wLight · 12.05.2014, 17:27

нарисуй квадрат который тебе нужен, поставь его фоном background-repeat: no-repeat; background-size: cover; и задавай размер в %.

Новые блоги и статьи Все статьи Все блоги /
Простая нейросеть на КуМир: Создание и обучение EggHead 16.03.2025 Искусственные нейронные сети — удивительная технология, позволяющая компьютерам имитировать работу человеческого мозга. Если вы хотя бы немного интересуетесь современными технологиями, то наверняка. . .	Исполнитель Кузнечик в КуМир: Решение задач EggHead 16.03.2025 Среди множества исполнителей в системе КуМир особое место занимает Кузнечик — простой, но невероятно полезный виртуальный персонаж, который перемещается по числовой прямой, выполняя ваши команды. На. . .	Исполнитель Водолей в КуМир: Решение задач EggHead 16.03.2025 Разработка алгоритмического мышления — одна из ключевых задач для начинающих программистов, и система КуМир предлагает отличный способ погрузиться в этот процесс. Среди множества исполнителей в этой. . .	Исполнитель Чертежник в КуМир: Решение задач EggHead 16.03.2025 Представьте, что вы можете рисовать на бесконечной координатной плоскости, перемещая точку, которая оставляет след. По вашей команде она может поднять перо и двигаться, не оставляя следа, или. . .	Исполнитель Робот в КуМир: Решение задач EggHead 16.03.2025 КуМир (Комплект Учебных МИРов) — это учебная среда программирования, разработанная специально для обучения базовым концепциям алгоритмизации. Её главная фишка — использование русскоязычного. . .
Исполнитель Черепаха в КуМир: Решение задач EggHead 16.03.2025 Представьте, что вы впервые учитесь программировать, а перед вами стоит задача заставить маленькую виртуальную черепашку рисовать на экране. Звучит забавно? Эта идея зародилась ещё в 1967 году, когда. . .	Конвейеры данных с Apache Kafka Javaican 16.03.2025 В мире, где данные стали новой нефтью, Apache Kafka зарекомендовал себя как мощный инструмент для построения надежных и масштабируемых конвейеров данных. Созданный изначально командой LinkedIn в 2011. . .	Deno против Node.js: Будущее JavaScript рантайма run.dev 16.03.2025 За последнее десятилетие Node. js стал абсолютным лидером среди JavaScript-рантаймов и фактическим стандартом для серверной разработки на JavaScript. Но в 2018 году тот же разработчик, который создал. . .	SwiftUI или UIKit - что выбрать для нового приложения iOS? mobDevWorks 16.03.2025 Когда Apple представила SwiftUI на WWDC 2019, многим показалось, что дни UIKit сочтены. Новый декларативный фреймворк предлагал радикально иной подход к разработке интерфейсов. Вместо кропотливого. . .	Docker: Руководство для начинающих по созданию первого приложения Mr. Docker 16.03.2025 Docker — это платформа, которая упаковывает ваше приложение и все его зависимости в стандартизированные блоки, называемые контейнерами. Эти контейнеры изолированы друг от друга и от основной системы,. . .

@wLight 38 / 38 / 22 Регистрация: 27.04.2014 Сообщений: 131
	12.05.2014, 03:06	4
	Сообщение было отмечено vooduq как решение Решение Excubitor, при необходимости можно подделать под любой z-index, он по сути там вообще не нужен, приоритет стилей идет с нижней части кода, без z-index картина будет таже 2

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404
	12.05.2014, 04:30 [ТС]	5
	спс бро, туплю не додумался) Добавлено через 2 минуты а если тема такая что border-width нельзя, т.к. размеры будут в % можно еще как то придумать с %? я про border-width, он не принимает % 0

@wLight 38 / 38 / 22 Регистрация: 27.04.2014 Сообщений: 131
	12.05.2014, 05:23	6
	напиши подробней для чего тебе % и где ты собираешься их использовать 1

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,526
	12.05.2014, 07:25	7
	Может быть что gif-картинка по весу окажется соизмерима с вашим огородом, плюс будет работать в старых ослах. Такого типа gif-картинка хорошо упакуется. Но это зависит от размеров рисунка. Сообщение от vooduq можно еще как то придумать с %? Если размер картинки плавающий, то браузеры неплохо умеют картинку масштабировать. Я бы попробовал. 1

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404
	12.05.2014, 16:02 [ТС]	8
	этот узор вертится, потом открывается это как интро к сайту, типа как к 007 там может помнишь такая вертуха была в начале фильма, соответственно нужно чтоб эти блоки были 160-200% в зависимости от пропорций экрана т.е. нужно чтобы они замещали все окно, а со стойкими пикселями на разных разрешениях может быть не достаточно размеров Добавлено через 39 секунд в принципе да, возможно гифка, спасибо 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	12.05.2014, 16:05	9
	можно еще использовать media query 1

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404
	12.05.2014, 16:13 [ТС]	10
	слишком сложно но гифка тоже грабли, хз короче буду думать 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	12.05.2014, 16:16	11
	vooduq, Да ничего особо сложного. Просто прописываете одни и те же стили для разного разрешения экрана, соответственно немного меняя их. 1

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404
	12.05.2014, 17:12 [ТС]	12
	это не гибко будет, бро + где-то 10 строк кода это не оправдает цель а представь что мне еще анимации делать для каждого блока) 0

@Excubitor 9 / 9 / 3 Регистрация: 23.05.2013 Сообщений: 129
	12.05.2014, 17:16	13
	Ну.. как знаешь... 0

@wLight 38 / 38 / 22 Регистрация: 27.04.2014 Сообщений: 131
	12.05.2014, 17:27	14
	нарисуй квадрат который тебе нужен, поставь его фоном background-repeat: no-repeat; background-size: cover; и задавай размер в %. Изображения 0

елемент1 над елементом2 который над елементом3 но под элементом1

Решение