Cтреловидные формы элементов с помощью CSS3 / Хабр

В веб-дизайне элементы неправильной формы всегда вызывают интерес. Стреловидные формы и диагональные линии могут создать интересный визуальный поток и дать приятный результат. Я был вдохновлен проектами, в которых используются неправильные формы, и теперь хочу показать пару простых примеров с их использованием.

Первый пример

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

Разметка

Давайте создадим секцию для всего контента, а в нее поместим блоки с классом se-slope, внутри которых будет находиться тексты:

<section class="se-container">
	<div class="se-slope">
		<article class="se-content">
			<h3>Some headline</h3>
			<p>Some text</p>
		</article>
	</div>
	<div class="se-slope">
		<!-- ... -->
	</div>
	<!-- ... -->
</section>

Теперь приступим к стилям.

Стили

У веб-страницы будет такой же цвет фона, как и у блока с классом se-slope. Это позволит скрыть неровности краев повернутых блоков:

body{
	background: #e90089;
}

Применим к блоку с классом se-container свойство overflow: hidden, чтобы отражались повернутые блоки:

.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	padding-top: 150px;
}

Сделаем нечетные блоки черными и повернем их на 5 градусов, а четные блоки сделаем розовыми и повернем их уже на -5 градусов. Скорректируем позиции нечетных элементов, добавив сверху отрицательный отступ:

.se-slope{
	margin: 0 -50px;
	transform-origin: left center;
}
.se-slope:nth-child(odd){
	background: #000;
	transform: rotate(5deg);
	margin-top: -200px;
	box-shadow: 0px -1px 3px rgba(0,0,0,0.4);
}
.se-slope:nth-child(even){
	background: #e90089;
	transform: rotate(-5deg);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}

Отцентрируем контент:

.se-content{
	margin: 0 auto;
}

Оформим заголовки. Для этого используем псевдо-элементы :before и :after для создания стреловидных сторон:

.se-content h3{
	font-size: 60px;
	position: relative;
	display: inline-block;
	padding: 10px 30px 8px 30px;
	height: 80px;
	line-height: 80px;
	margin-bottom: 20px;
	font-family: 'Bitter', 'Trebuchet MS', Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-slope:nth-child(odd) .se-content h3{
	background: #e90089;
	color: #000;
}
.se-slope:nth-child(even) .se-content h3{
	background: #000;
	color: #e90089;
}
.se-content h3:before{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-right: 60px solid black;
	position: absolute;
	left: -59px;
	top: 0px;
}
.se-content h3:after{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid black;
	position: absolute;
	right: -59px;
	top: 0px;
}

Зададим цвет для нечетных элементов:

.se-slope:nth-child(odd) .se-content h3:before,
.se-slope:nth-child(odd) .se-content h3:after{
	border-right-color: #e90089;
	border-left-color: #e90089;
}

Зададим стили для параграфов:

.se-content p{
	width: 75%;
	max-width: 500px;
	margin: 0 auto;
	font-style: italic;
	font-size: 18px;
	line-height: 24px;
	padding-top: 10px;
}

Зададим стили для буквы, с которой начинается параграф:

.se-content p:first-letter{
	font-size: 40px;
	font-family: 'Adobe Garamond Pro', Georgia, serif;
}

Повернем контент таким образом, чтобы он располагался горизонтально и отрегулируем отступы:

.se-slope:nth-child(odd) .se-content{
	transform: rotate(-5deg);
	color: #e90089;
	padding: 130px 100px 250px 100px;
}
.se-slope:nth-child(even) .se-content{
	transform: rotate(5deg);
	color: #000;
	padding: 150px 100px 250px 100px;
}

Демонстрация первого примера

Это был первый пример. Рассмотрим второй.

Второй пример

Во втором примере используем прозрачные границы и псевдо-элементы для создания стреловидных форм.

Разметка

Используем такую же разметку, как и в первом примере, только добавим два класса sl-slope-black и sl-slope-pink в зависимости от цвета блоков:

<section class="se-container">
	<div class="se-slope sl-slope-black">
		<article class="se-content">
			<h3>Some headline</h3>
			<p>Some text</p>
		</article>
	</div>
	<div class="se-slope sl-slope-pink">
		<!-- ... -->
	</div>
	<!-- ... -->
</section>

Приступим к стилям.

Стили

Веб-страница и блок с классом se-container будут иметь те же стили, что и в первом примере:

body{
	background: #e90089
}
.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	box-shadow: 0px 0px 10px #000;
}

Блоки с контентом будут обтекаться слева и соединяться друг с другом:

.se-slope{
	width: 50%;
	height: 300px;
	position: relative;
	float: left;
	overflow: hidden;
}

Добавим отступы к контенту:

.se-slope .se-content{
	margin: 50px 100px 0px 100px;
}

Установим черный и розовый фон для соответствующих блоков:

.se-slope-black{
	background: #000;
}
.se-slope-pink{
	background: #e90089;
}

К черным блокам применим псевдо-элемент :after для создания стреловидной формы. Нечетные элементы будут располагаться слева, а четные — справа:

.se-slope-black:nth-child(odd):after,
.se-slope-black:nth-child(even):after{
	content: '';
	position: absolute;
	bottom: 0px;
	width: 0px;
	height: 0px;
	border-top: 150px solid transparent;
	border-bottom: 150px solid transparent;
}
.se-slope-black:nth-child(odd):after{
	border-right: 60px solid #e90089;
	right: 0px;
}
.se-slope-black:nth-child(even):after{
	border-left: 60px solid #e90089;
	left: 0px;
}

Добавим стили к заголовкам:

.se-content h3{
	z-index: 10;
	font-size: 30px;
	margin-top: 60px;
	position: relative;
	display: inline-block;
	padding: 15px 20px;
	line-height: 40px;
	font-family: 'Bitter', 'Trebuchet MS', Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-slope.se-slope-black h3{
	background: #e90089;
}
.se-slope.se-slope-pink h3{
	background: #000;
}

Добавим скосы у форм заголовков:

.se-slope.se-slope-black h3:after,
.se-slope.se-slope-black h3:before,
.se-slope.se-slope-pink h3:after,
.se-slope.se-slope-pink h3:before{
	content: '';
	width: 0px;
	height: 0px;
	top: 0px;
	position: absolute;
}
.se-slope.se-slope-black h3:after{
	border-top: 70px solid transparent;
	border-left: 30px solid #e90089;
	right: -30px;
}
.se-slope.se-slope-black h3:before{
	border-bottom: 70px solid transparent;
	border-right: 30px solid #e90089;
	left: -30px;
}
.se-slope.se-slope-pink h3:after{
	border-top: 70px solid transparent;
	border-right: 30px solid #000;
	left: -30px;
}
.se-slope.se-slope-pink h3:before{
	border-bottom: 70px solid transparent;
	border-left: 30px solid #000;
	right: -30px;
}

Используем текст в качестве декоративного элемента. В левом блоке повернем текст на 15 градусов, а в правом повернем на -15 градусов:

.se-content p{
	position: absolute;
	z-index: 9;
	opacity: 0.3;
	font-size: 50px;
	text-align: left;
	transform-origin: top center;
}
.se-slope:nth-child(even) .se-content p{
	transform: rotate(-15deg);
	top: -100px;
	right: -50px;
	text-align: left;
	width: 95%;
}
.se-slope:nth-child(odd) .se-content p{
	transform: rotate(15deg);
	top: -100px;
	left: -50px;
	text-align: right;
	width: 90%;
}
.se-slope.sl-slope-pink .se-content p{
	color: #000;
}

Демонстрация второго примера

Вот и все! Я надеюсь что вам понравился урок и вы найдете ему применение!

Cтреловидные формы элементов с помощью CSS3

Первый пример

Разметка

Стили

Второй пример

Разметка

Стили

Публикации

Ближайшие события