Как сделать резиновую вёрстку угольных фигур с рисунком?

Question

[Alexander Lashchevsky]

Здравствуйте!

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

P.S. В качестве фона используется картинка.

Предположим, резина должна быть в диапазоне 900px - 1400px. С контентом не проблема, а вот что делать с такими вещами, как углы снизу, чтобы ничего никуда не съезжало, не портилось качество?

Обычно я просто не делаю их и делаю ровными, но тут настаивают на резине.

Поиск ничего не подсказал.

Хочу ваших советов/ссылок на полезные ресурсы, которые объяснят мне, как делать такие вещи адаптивными.

Спасибо!

С уважением,
Александр.

UPD. Если никак - так и скажите: не делаются такие штуки резиновыми. :)

Answer 1

[Андрей Верх]

Если c CSS трансформациями не выходит, то картинками это делается не сложно.

Два блока по 50% с overflow:hidden. В левом background выравнивается по левому краю, в правом по правому. На любой ширине, они будут сходиться в центре

Comments

[Alexander Lashchevsky]

По-моему самое простое решение! Спасибо!

Answer 2

[Pshkll]

Стоит мыслить в этом направлении:

<div class="block1">
	<div class="block2">
		<div class="outer2"></div>
	</div>
	<div class="outer1"></div>
</div>

.block1{
	width: 80%;
	height: 40%;
	background: red;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}
.outer1{
	background: orange;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.outer1:after{
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-bottom: 10%;
	background: rgba(255, 0, 0, 0.73);
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
.block2{
	width: 94%;
	height: 91%;
	margin: 0 auto;
	background: green;
	position: relative;
	z-index: 20;
}
.outer2{
	background: orange;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.outer2:after{
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-bottom: 10%;
	background: rgb(1, 136, 1);
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

(классы и цвета только для примера, чтобы вы поняли)

Answer 3

[Александр Вульф]

Фон у подложки одноцветный?

Comments

[Alexander Lashchevsky]

Нет. Там рисунок, который на скриншоте почти не виден

И это только один из блоков, есть и другие, тоже с рисунками.

[Александр Вульф]

Alexander Lashchevsky: тогда так сделать невозможно. Точнее, возможно, но овчинка выделки не стоит. Будет куча побочных блоков и все приправлено говноверсткой + говностилями.

Answer 4

[Валерий Серов]

делайте каритинкой угол высоту фикс а ширину 100%
и пускай растягивается если не красиво пробуйте разные трансформации но сделать не сложно