Диагональный фон

grisha_21 · June 30, 2012

Приветствую уважаемых посетителей форума!

У меня есть вопрос. Возможно ли сделать такой сайт, чтобы фон его был таким диагональным прямоугольником во всю высоту экрана? При этом хочется, чтобы розовая область была резиновой, а белые треугольники по бокам разъезжались бы в разные стороны. Это нужно, например для того, чтобы колонка с контентом не становилась слишком узкой на больших разрешениях монитора.

пример картинки

mrnobody · July 1, 2012

Вот так получилось :blush:

Вот пока код (на http://jsfiddle.net/ не заходит):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,
body{
	height: 100%; /*задаём высоту для body и html, чтобы было относительно чего задавать высоту .wrapper'у*/
}
body{
	background-image: -webkit-linear-gradient(168deg, #555 10%, #fff 10%, #fff 90%, #555 90%);
	background-image: -moz-linear-gradient(168deg, #555 10%, #fff 10%, #fff 90%, #555 90%);
	background-image: -o-linear-gradient(168deg, #555 10%, #fff 10%, #fff 90%, #555 90%);
	background-image: -ms-linear-gradient(168deg, #555 10%, #fff 10%, #fff 90%, #555 90%);
	background-image: linear-gradient(168deg, #555 10%, #fff 10%, #fff 90%, #555 90%); /*задаем градиентный фон для body*/
	margin: 0; /*убираем внутренний отступ у маржин (по умолчанию стоит 8px)*/
}
.wrapper{
	background-color: #f48bbc; /*цвет фона*/
	margin: auto; /*выравнием по центру*/
	min-height: 100%; /*на всю длинну, относительно родителя, т.е. body*/
	width: 78%; /*ширина*/
	font: 9em Helvetica, Arial; /*размер и название шрифта*/
	color: #272822; /*цвет шрфита*/
}
</style>
</head>
<body>
	<div class="wrapper">
		Контент
	</div>
</body>
</html>

http://starbuzz.16mb.com/bg/

Edited July 1, 2012 by mrnobody

Sign In

Диагональный фон

Question

grisha_21

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information