Как это можно реализовать на html css?

Question

[00absolute_zero0]

Здравствуйте как это можно реализовать с помощью css html

Comments

[iBird Rose]

https://codepen.io/shoowack/pen/abbMwxB

[Alfieros]

iBird Rose, пример хороший. Но, здесь явно не по 3 блока.

[iBird Rose]

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

[Alfieros]

iBird Rose, совершенно в дырочку. Я поэтому и сказал, что пример хороший.

Answer 1

[00absolute_zero0]

section {
	position: relative;
	margin: calc(var(--size) * 1.1) auto 0;
	width: calc(var(--size) * calc(var(--Nhexa) - 1));
	display: grid;
	grid-template-columns: repeat(var(--Nhexa), 1fr);
	grid-gap: var(--gap);
	margin-bottom: 50px;
}
article {
	position: relative;
	background: #e0ce04;
	width: var(--size);
	height: calc(var(--size) / 1.222222);
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	margin-right: calc(var(--size) / 2);
	overflow: hidden;
}
.orange {
	background: #dba428;
}
.style__block {
	@extend %center;
}
.image {
	background: url(../img/block__image.png) no-repeat center;
	background-size: cover;
}
.image1 {
	background: url(../img/block__image1.png) no-repeat center;
	background-size: cover;
}
.image2 {
	background: url(../img/block__image2.png) no-repeat center;
	background-size: cover;
}
.image3 {
	background: url(../img/block__image3.png) no-repeat center;
	background-size: cover;
}
.figure__style {
	margin-right: 25px;
}
.block__img {
	@extend %center;
	margin-right: 0px;
	margin-bottom: 20px;
}
.block__sublogo-text {
	font-size: 18px;
	font-family: "Montserrat", sans-serif;
	color: rgb(0, 0, 0);
	font-weight: bold;
	line-height: 1;
}

.block__subtext {
	font-size: 14px;
	font-family: "Montserrat", sans-serif;
	color: rgb(0, 0, 0);
	line-height: 1.333;
}

article:nth-child(2n) {
	margin: calc(var(--size) * -0.45) calc(var(--size) * -0.35) 0 calc(var(--size) * -0.74);
}

article:nth-child(11) {
	margin: calc(var(--size) * -1.8) calc(var(--size) * -0.35) 0 calc(var(--size) * 0);
}
article:nth-child(13) {
	margin: calc(var(--size) * -2.85) calc(var(--size) * -0.35) 0 calc(var(--size) * 0.3);
	--size: calc(calc(65vw / var(--Nhexa)) - var(--gap));
}
article:nth-child(12) {
	margin: calc(var(--size) * -0.8) calc(var(--size) * -0.35) 0 calc(var(--size) * -1.2);
	--size: calc(calc(50vw / var(--Nhexa)) - var(--gap));
}
article:nth-child(7) {
	--size: calc(calc(35vw / var(--Nhexa)) - var(--gap));
	margin: calc(var(--size) * 0) calc(var(--size) * -0.35) 0 calc(var(--size) * 1.45);
}
article:nth-child(9) {
	margin: calc(var(--size) * -1.8) calc(var(--size) * 0) 0 calc(var(--size) * 0);
}
article:nth-child(14) {
	margin: calc(var(--size) * 4) calc(var(--size) * -0.35) 0 calc(var(--size) * -1.2);
	--size: calc(calc(50vw / var(--Nhexa)) - var(--gap));
}
.adaptiviti {
	--size: calc(calc(40vw / var(--Nhexa)) - var(--gap));
	position: absolute;
	top: 145px;
	right: -80px;
}
article::before {
	content: "";
	float: left;
	width: 25%;
	height: 100%;
	clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
	shape-outside: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
}

<section>
						<article class="orange style__block">
							<figure class="figure__style">
								<div class="block__info">
									<div class="block__img">
										<p class="block__sublogo-text">01.</p>
										<img src="img/heat.png" alt="heat__logo">
									</div>
									<div class="block__text">
										<span class="block__subtext">2 режима работы &ensp;&ensp;&ensp;на
											обогрев</span>
									</div>
								</div>
							</figure>
						</article>
						<article class="style__block">
							<figure class="figure__style">
								<div class="block__info">
									<div class="block__img">
										<p class="block__sublogo-text">02.</p>
										<img src="img/shield.png" alt="heat__logo">
									</div>
									<div class="block__text">
										<span class="block__subtext">&ensp;&ensp;Защита<br> от
											перегрева&ensp;&ensp;</span>
									</div>
								</div>
							</figure>
						</article>
						<article class="style__block">
							<figure class="figure__style">
								<div class="block__info">
									<div class="block__img">
										<p class="block__sublogo-text">03.</p>
										<img src="img/compact-disk.png" alt="heat__logo">
									</div>
									<div class="block__text">
										<span class="block__subtext">&ensp;&ensp;&ensp;Компактный
											&ensp;&ensp;&ensp;&ensp;&ensp;размер</span>
									</div>
								</div>
							</figure>
						</article>
						<article class="style__block">
							<figure class="figure__style">
								<div class="block__info">
									<div class="block__img">
										<p class="block__sublogo-text">04.</p>
										<img src="img/idea.png" alt="heat__logo">
									</div>
									<div class="block__text">
										<span class="block__subtext">&ensp;&ensp;&ensp;Необычный
											&ensp;&ensp;&ensp;&ensp;&ensp;дизайн</span>
									</div>
								</div>
							</figure>
						</article>
						<article class="orange style__block">
							<figure class="figure__style">
								<div class="block__info">
									<div class="block__img">
										<p class="block__sublogo-text">05.</p>
										<img src="img/temperature.png" alt="heat__logo">
									</div>
									<div class="block__text">
										<span class="block__subtext">Режим холодного
											&ensp;&ensp;&ensp;&ensp;&ensp;обдува</span>
									</div>
								</div>
							</figure>
						</article>
						<article class="orange style__block">
							<figure class="figure__style">
								<div class="block__info">
									<div class="block__img">
										<p class="block__sublogo-text">06.</p>
										<img src="img/fair.png" alt="heat__logo">
									</div>
									<div class="block__text">
										<span class="block__subtext">Керамический
											&ensp;&ensp;&ensp;&ensp;нагрев</span>
									</div>
								</div>
							</figure>
						</article>
						<article>
							<figure>
							</figure>
						</article>
						<article class="image1">
							<figure>
								<h2></h2>
							</figure>
						</article>
						<article class="image">
							<figure>
								<h2></h2>
							</figure>
						</article>
						<article class="image3">
							<figure>
								<h2></h2>
							</figure>
						</article>
						<article class="image2">
							<figure>
								<h2></h2>
							</figure>
						</article>
						<article>
							<figure>
							</figure>
						</article>
						<article class="orange">
							<figure>
							</figure>
						</article>
						<article class="none">
							<figure>
							</figure>
						</article>
						<article class="adaptiviti orange">
							<figure>
							</figure>
						</article>
					</section>

Comments

[Antony Bark]

OT: Should be ashamed to earn reputation in this way

[00absolute_zero0]

Antony Bark, how?

[Antony Bark]

Smugly consider your answer a solution? Original!
..at the same time, ignoring the comments of community members that the decision is illiterate.