Верстка блока в лендинге — как правильно реализовать+адаптив?

Question

[Даниил Вершинин]

Нужно сделать так:

Верстаю на Bootstrap. Как лучше сделать? В голове - два варианта либо тупо вставлять картинкой (и то - хрен знает, как туда нормально запихать текст, чтоб не ехало). Второй - потрахаться с after и before.

Причем, нужен адаптив (видимо, в одну колонку).

Заранее спасибо))

Comments

[Сергей delphinpro]

Не морочься, запили шестигранники с картинкой в svg, текст абсолютом поверх блоков.
Не надо изъебства с css-фигурами или клип-пачами.
С позиционированием самих блоков вроде не должно быть проблем.
Ничего особо сложного.

[Сергей delphinpro]

А вот и вопросик как раз (с ответом) как в svg обрезать фон
Как обрезать фон, с помощь SVG-фигуры?

[Froggyweb]

Сергей: только там еще сетка из обводок и адаптив. Убивать недодизайнеров надо.

[Сергей delphinpro]

Froggyweb: Сетка - в той же SVG-шке, какие проблемы нарисовать шестиугольник?
Адаптив - элементарно. В определенных пределах можно резайзить размеры шестиугольников, на маленьких экранах выстроить в столбик.
Нормальный дизайнер. Простой блок.

Answer 1

[Даниил Вершинин]

Ребят, смотрю, многие подписались. Реализовал вот так:

<section class="container-fluid bl">
     <h2>Сферы применения мобильных <br> расточных станков</h2>
            <div class="sam-boxes">
				<div class="sam-boxes-holder">
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img1.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Восстановление изношенных отверстий экскаваторов, подъемных кранов, корпус редукторов. Восстановление отверстий кораблей под гребные винты, рули и проч.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img2.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Энергетическое оборудование: насосы, компрессоры, котлы турбины, барабаны, задвижки, генераторы</p>
								</div>
							</div>
						</div>
					</div>
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img3.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Нефтегазовая промышленность: газоперекачивающие агрегаты, насосные станции, колонны</p>
								</div>
							</div>
						</div>
					</div>
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img4.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Металлургическая промышленность: печи, машины непрерывного литья, прокатные станы, клети</p>
								</div>
							</div>
						</div>
					</div>
					<div class="sam-box">
						<div class="sam-box-holder">
							<div class="sam-box-frame">
								<img src="http://pion-pioner.ru/wp-content/themes/stanexpert/img/img5.jpg" width="313" height="271" alt="">
								<div class="text-box">
									<p>Железнодорожный транспорт: узлы и агрегаты локомотивов и вагонов, блоки двигателей и прочее</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>

.sam-boxes{
	width:1130px;
	margin:0 auto;
	background:#fff;
	text-align:center;
}
.sam-boxes:after{
	content:"";
	display:block;
	clear:both;
}
.sam-boxes-holder{margin:0 -15px;}
.sam-box{
	display:inline-block;
	vertical-align:top;
	margin:0 -4px 35px 0;
	width:33.3333%;
	padding:0 15px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
}
.sam-box .sam-box-holder{
	width:100%;
	width:344px;
	height:297px;
	position:relative;
	margin:0 auto;
}
.sam-box .sam-box-holder:after{
	content:"";
	display:block;
	clear:both;
}
.sam-box .sam-box-frame{
	width:100%;
	width:344px;
	height:297px;
	overflow:hidden;
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:13px 15px;
}
.sam-box:nth-child(1):before{
	content:"";
	display:block;
	position:absolute;
	width:58px;
	height:1px;
	background:url(../img/bg-line-c.png) no-repeat;
	left:355px;
	top:148px;
}
.sam-box:nth-child(2):before{
	content:"";
	display:block;
	position:absolute;
	width:58px;
	height:1px;
	background:url(../img/bg-line-c.png) no-repeat;
	left:355px;
	top:148px;
}
.sam-box:nth-child(4):before{
	content:"";
	display:block;
	position:absolute;
	width:58px;
	height:1px;
	background:url(../img/bg-line-c.png) no-repeat;
	left:355px;
	top:148px;
}
.sam-box .sam-box-holder:after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	background:url(../img/bg-sam-box.png) no-repeat;
	width:344px;
	height:297px;
}
.sam-box:nth-child(1) .sam-box-holder:before{
	content:"";
	display:block;
	position:absolute;
	width:30px;
	height:38px;
	background:url(../img/bg-line-r.png) no-repeat;
	left:254px;
	top:296px;
}
.sam-box:nth-child(2) .sam-box-holder:before{
	content:"";
	display:block;
	position:absolute;
	width:31px;
	height:38px;
	background:url(../img/bg-line-l.png) no-repeat;
	left:60px;
	top:297px;
}
.sam-box:nth-child(3) .sam-box-holder:before{
	content:"";
	display:block;
	position:absolute;
	width:31px;
	height:38px;
	background:url(../img/bg-line-l.png) no-repeat;
	left:60px;
	top:297px;
}
.sam-box:nth-child(5) .sam-box-holder:before{
	content:"";
	display:block;
	position:absolute;
	width:31px;
	height:38px;
	background:url(../img/bg-line-r.png) no-repeat;
	left:60px;
	top:-36px;
}
.sam-box img{
	width:313px;
	height:271px;
}
.sam-box .text-box{
	position:absolute;
	left:15px;
	bottom:13px;
	width:312px;
	height:135px;
	background:url(../img/bg-frame.png) no-repeat;
	    padding-top: 20px;
}
.sam-box p{
	margin:0;
	font-family: 'Muller Light';
	font-size: 13px;
	color: #f3b2b2;
	    margin: 0 auto;
    line-height: 12px;

}

.bl h2 {
	color: #353535;
	text-align: center;
	margin-bottom: 80px;
}

Где картинки - соответствующие линии - вроде, красиво))

Comments

[Antony Bark]

всё понимаю, но зачем ставить свой же ответ решением? Решили - молодцом, а такой путь - накрутка.
удачи!

[sim3x]

лучше спрятать етот код, чтоб потом не краснеть

[Даниил Вершинин]

sim3x: я бы лучше все свои вопросы с аккаунта удалил))

[sim3x]

Даниил Вершинин:
Около вопроса есть три точки - там в меню должен быть вариант с удалением вопроса

Главное запомни - никогда не порти вопрос
Те не редактируй его так чтоб он потерял свой изначальный смысл

Answer 2

[Лобстер]

https://jsfiddle.net/bwbtv5oz/ не кроссбраузерно правда

Answer 3

[Aleksey Chernikov]

csshexagon.com
jsfiddle.net/kizu/bhGn4

Примеров как реализовать такие фигуры средствами css достаточно много. Может придется немного поэкспериментировать, чтобы получить результат как в макете.

Comments

[Лобстер]

Скажите а есть такая же штука на другие фигуры?

[Aleksey Chernikov]

Лобстер: Где то видел clip-path генератор. Можете легко найти кучу таких в гугле. Но как вы говорили выше - это не поддерживается в IE и Edge.
Если подсмотреть логику рисования таких фигур, то, думаю, не составит труда сделать что то свое.