Как я могу сделать div с irregular shapes с помощью css3 и html5?

262
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>

Источник

READ ALSO
Создание вращающегося 3d-блока с помощью CSS transitions и Javascript
HTML

Создание вращающегося 3d-блока с помощью CSS transitions и Javascript

Я экспериментировал с CSS, пытаясь создать 3d box, в котором можно выбрать передний план фигуры с помощью javascriptОн просто меняет имя класса box divs и использует...

 238
Как поменять тему в Sublime Text 3?
HTML

Как поменять тему в Sublime Text 3?

Как поменять тему в Sublime Text 3 ? А то уже глаза кровью наливаются от розового текста HTML-документа :(

 213
2 обработчика для одной формы
HTML

2 обработчика для одной формы

Доброй ночи, есть форма от Яндекс кассы

 219
Не работает auto-fill в Grid
HTML

Не работает auto-fill в Grid

Не работает свойство:

 202