Сетка из шестиугольников на CSS

Пример:

Пример показан для рядов из 4-х и 3-х шестиугольников (для ширины экрана более 1200px), а CSS ниже для рядов из 5-ти и 4-х.

HTML:

<ul id="hexGrid">
	<li class="hex">
        <div class="hexIn">
			<a class="hexLink" href="#">
				<img src="image.jpg" alt="" />
				<h2>Заголовок</h2>
				<p>Краткий текст</p>
			</a>
		</div>
	</li>
	<!-- ... -->	  
	<li class="hex">
        <div class="hexIn">
			<a class="hexLink" href="#">
				<img src="image.jpg" alt="" />
				<h2>Заголовок</h2>
				<p>Краткий текст</p>
			</a>
		</div>
	</li>
</ul>

<h2>Заголовок</h2>

<p>Краткий текст</p>

</a>

</div>

</li>

<h2>Заголовок</h2>

<p>Краткий текст</p>

</a>

</div>

</li>

</ul>

CSS:

#hexGrid {
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
	list-style-type: none;
	padding: 0;	
}
.hex {
	position: relative;
	visibility:hidden;
	outline:1px solid transparent; 
}
.hex::after {
	content:'';
	display:block;
	padding-bottom: 86.602%; 
}
.hexIn {
	position: absolute;
	width:96%;
	padding-bottom: 110.851%; 
	margin:0 2%;
	overflow: hidden;
	visibility: hidden;
	outline:1px solid transparent; 
	-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
	-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
	transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
	margin: 0;
	padding: 0;	
	position: absolute;
	visibility: visible;
	outline:1px solid transparent; 
}
.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
	-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
	transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}
.hex img {
	left: -100%;
	right: -100%;
	width: auto;
	height: 100%;
	margin: 0 auto;
	-webkit-transform: rotate3d(0,0,0,0deg);
	-ms-transform: rotate3d(0,0,0,0deg);
	transform: rotate3d(0,0,0,0deg);	  
}
.hex h2, .hex p {
	width: 100%;
	padding: 5%;
	box-sizing:border-box;
	background-color: rgba(51, 122, 183, 0.8);
	font-weight: 300;
	-webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
	transition: transform .2s ease-out, opacity .3s ease-out;
}
.hex h2 {
	bottom: 50%;
	padding-top:50%;
	font-size: 1.5em;
	z-index: 1;
	-webkit-transform:translate3d(0,-100%,0);
	-ms-transform:translate3d(0,-100%,0);
	transform: translate3d(0,-100%,0);
}
.hex h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 45%;
	width: 10%;
	text-align: center;
	border-bottom: 1px solid #fff;
	
}
.hex p {
	top: 50%;
	padding-bottom:50%;
	-webkit-transform:translate3d(0,100%,0);
	-ms-transform:translate3d(0,100%,0);
	transform:translate3d(0,100%,0);
}
.hexLink:hover h2, .hexLink:focus h2,
.hexLink:hover p, .hexLink:focus p {
	-webkit-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
@media (min-width:1201px) { /* сетка 5 - 4 */
	#hexGrid{
		padding-bottom: 4.4%
	}
	.hex {
		width: 20%; 
	}
	.hex:nth-child(9n+6){ 
		margin-left:10%; 
	}
}
@media (max-width: 1200px) and (min-width:901px) { /* сетка 4 - 3 */
	#hexGrid{
		padding-bottom: 5.5%
	}
	.hex {
		width: 25%;
	}
	.hex:nth-child(7n+5){ 
		margin-left:12.5%; 
	}
}
@media (max-width: 900px) and (min-width:601px) { /* сетка 3 - 2 */
	#hexGrid{
		padding-bottom: 7.4%
	}
	.hex {
		width: 33.333%;
	}
	.hex:nth-child(5n+4){ 
		margin-left:16.666%; 
	}
}
@media (max-width: 600px) { /* сетка 2 - 1 */
	#hexGrid{
		padding-bottom: 11.2%
	}
	.hex {
		width: 50%; 
	}
	.hex:nth-child(3n+3){
		margin-left:25%;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

#hexGrid {

display: flex;

flex-wrap: wrap;

width: 90%;

margin: 0 auto;

overflow: hidden;

list-style-type: none;

padding: 0;

}

.hex {

position: relative;

visibility:hidden;

outline:1px solid transparent;

}

.hex::after {

content:'';

display:block;

padding-bottom: 86.602%;

}

.hexIn {

position: absolute;

width:96%;

padding-bottom: 110.851%;

margin:0 2%;

overflow: hidden;

visibility: hidden;

outline:1px solid transparent;

-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);

-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);

transform: rotate3d(0,0,1,-60deg) skewY(30deg);

}

.hexIn * {

margin: 0;

padding: 0;

position: absolute;

visibility: visible;

outline:1px solid transparent;

}

.hexLink {

display:block;

width: 100%;

height: 100%;

text-align: center;

color: #fff;

overflow: hidden;

-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);

-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);

transform: skewY(-30deg) rotate3d(0,0,1,60deg);

}

.hex img {

left: -100%;

right: -100%;

width: auto;

height: 100%;

margin: 0 auto;

-webkit-transform: rotate3d(0,0,0,0deg);

-ms-transform: rotate3d(0,0,0,0deg);

transform: rotate3d(0,0,0,0deg);

}

.hex h2, .hex p {

width: 100%;

padding: 5%;

box-sizing:border-box;

background-color: rgba(51, 122, 183, 0.8);

font-weight: 300;

-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;

transition: transform .2s ease-out, opacity .3s ease-out;

}

.hex h2 {

bottom: 50%;

padding-top:50%;

font-size: 1.5em;

z-index: 1;

-webkit-transform:translate3d(0,-100%,0);

-ms-transform:translate3d(0,-100%,0);

transform: translate3d(0,-100%,0);

}

.hex h2::after {

content: '';

position: absolute;

bottom: 0;

left: 45%;

width: 10%;

text-align: center;

border-bottom: 1px solid #fff;

}

.hex p {

top: 50%;

padding-bottom:50%;

-webkit-transform:translate3d(0,100%,0);

-ms-transform:translate3d(0,100%,0);

transform:translate3d(0,100%,0);

}

.hexLink:hover h2, .hexLink:focus h2,

.hexLink:hover p, .hexLink:focus p {

-webkit-transform:translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);

transform:translate3d(0,0,0);

}

@media (min-width:1201px) { /* сетка 5 - 4 */

#hexGrid{

padding-bottom: 4.4%

}

.hex {

width: 20%;

}

.hex:nth-child(9n+6){

margin-left:10%;

}

@media (max-width: 1200px) and (min-width:901px) { /* сетка 4 - 3 */

#hexGrid{

padding-bottom: 5.5%

}

.hex {

width: 25%;

}

.hex:nth-child(7n+5){

margin-left:12.5%;

}

@media (max-width: 900px) and (min-width:601px) { /* сетка 3 - 2 */

#hexGrid{

padding-bottom: 7.4%

}

.hex {

width: 33.333%;

}

.hex:nth-child(5n+4){

margin-left:16.666%;

}

@media (max-width: 600px) { /* сетка 2 - 1 */

#hexGrid{

padding-bottom: 11.2%

}

.hex {

width: 50%;

}

.hex:nth-child(3n+3){

margin-left:25%;

}

Количество шестиугольников в рядах

За кол-во шестиугольников в рядах отвечают 2 класса .hex и .hex:nth-child и работают по формуле:

.hex { width: 100%/х; }

.hex:nth-child(an+b){ margin-left: 100%/x/2; /* половина ширины .hex */ }

Где:

x - кол-во шестиугольников в нечетных рядах (1-ый, 3-тий, 5-тый и т.д.)

y - кол-во шестиугольников в четных рядах (2-ой, 4-тый, 6-той и т.д.)

a = x + y

b = x + 1

Таким образом, если нам нужно расположить шестиугольники в ряды по 8 и 7, то классы будут выглядеть так:


.hex {

   width: 12.5%; /* 100/8 */

}

.hex:nth-child(15n+9) { /* 8+7 и 8+1 */ margin-left: 6.25% /* 12,5%/2 */ }

Автор: web-tiki

Страничка на github

Пример:

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

HTML:

CSS:

Количество шестиугольников в рядах

Смотрите также:

Добавить комментарий: