Как я могу сделать div с irregular shapes с помощью css3 и html5?
197
03 мая 2018, 05:49
Мне интересно, есть ли возможность построить div с нерегулярными фигурами, что-то,аналогичные картам (например, Гренландия, Европа, Африка)
Я хочу создать карту, как здесь, используя CSS3 и HTML5.
Answer 1
То, что у вас на картинке, похоже на grid(сетку), которую вы можете получить либо со многими градиентами на div, либо с сеткой из многих div, на которые вы применяете CSS-transforms (DEMO).
Вот ключевой момент в правилах CSS, которые отвечают за трансформацию всего набора квадратов и придания ему 3D эффекта:
.grid {
transform: skewX(-45deg)
rotate(15deg)
scaleX(1.785) scaleY(.8)
translateX(-4.5em) translateY(-3em);
} Ниже неполный код, показывающий, как реализована структура приложения:
HTML:
<div class='container'>
<div class='grid'>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<!-- and so on... -->CSS:
div { box-sizing: border-box; }
.container {
overflow: hidden;
width: 32em;
height: 32em;
margin: 5.6em auto 0;
background: silver;
}
.grid {
transform: skewX(-45deg)
rotate(15deg)
scaleX(1.785) scaleY(.8)
translateX(-4.5em) translateY(-3em);
}
.grid-row {
width: 32em;
height: 2em;
}
.grid-cell {
float: left;
width: 2em;
height: 2em;
}
.high {
background: gainsboro;
}
.high:hover {
background: whitesmoke;
}Полный код
div { box-sizing: border-box; }
.container {
overflow: hidden;
width: 32em;
height: 32em;
margin: 5.6em auto 0;
background: silver;
}
.grid {
transform: skewX(-45deg)
rotate(15deg)
scaleX(1.785) scaleY(.8)
translateX(7em) translateY(-4.5em);
}
.grid-row {
width: 32em;
}
.grid-cell {
float: left;
width: 2em;
height: 2em;
}
.high {
box-shadow: .2em .2em 0 dimgrey;
background: gainsboro;
cursor: pointer;
}
.high:hover {
background: whitesmoke;
}<!-- content to be placed inside <body>…</body> -->
<div class='container'>
<div class='grid'>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
</div>
<div class='grid-row'>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
<div class='grid-row'>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
<div class='grid-cell high'></div>
</div>
</div>Источник
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47915 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23901 visits
- Как через css изменить цвет png изображения? 10401 visits
- Blob video url download 10005 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 26.3.2025 | 11:55