Загнутый угол на CSS3

Бороздя просторы интернета, вы наверняка не раз натыкались на загнутый уголок, который сейчас невероятно популярен. Если вы хороший верстальщик, то сделаете его на CSS3. А если вы не знаете как его сделать, то данная статья как раз для вас!

На каждом сайте, где вы могли бы видеть примеры, показывают примитивную версию, которая вполне сгодилась бы для ваших целей:

.example1{
	position:relative;
	}
.example1:before{
	content:"";
	position: absolute;
	top: 0px;
	right: 0px;
	border-style: solid;
	border-width: 0 40px 40px 0;
	border-color: #fff #fff #333 #fff;
	}

Разберемся с тем, как сделали этот загнутый уголок. На блок наложен пустой псевдоэлемент :before. С помощью свойства border блок разделили на 2 треугольника: серого и белого цвета. И все бы хорошо, весело и задорно. Но возникает проблема, когда фон под этим блоком не однотонный. Посмотрим на примере:

.example2{
	position:relative;
	}
.example2:before{
	content:"";
	position: absolute;
	top: 0px;
	right: 0px;
	border-style: solid;
	border-width: 0 40px 40px 0;
	border-color: #fff #fff #333 #fff;
	}

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

.example3{
	position:relative;
	}
.example3:before{
	content:"";
	position: absolute;
	top: 0px;
	right: 0px;
	border-style: solid;
	border-width: 0 40px 40px 0;
	border-color: transparent transparent 
			#333 transparent;
	}

Чтобы загнутый уголок на CSS3 хорошо смотрелся даже на неоднотонном фоне, нужно использовать относительно новое css3 свойство clip-path и css функцию calc().

.example4{
	position:relative;
	}
.example4:before{
	content:"";
	position: absolute;
	top: 0px;
	right: 0px;
	border-style: solid;
	border-width: 0 40px 40px 0;
	border-color: transparent transparent 
	  		#333 transparent;
	clip-path: polygon(
		0% 0%,
		calc(100% - 40px) 0%,
		100% 40px,
		100% 100%,
		0% 100%);
	}

Рассмотрим что сдесь происходит: свойство clip-path работает аналогично векторным маскам в Фотошопе. В качестве параметра clip-path хочет получить SVG объект (в данном случае polygon), который и будет маской. polygon принимает координаты в таком порядке:"x1 y1, x2 y2, ..., xn yn". По этим точкам строится многоульник. В данном случае фигура является пятиугольником.

Функция calc используется для тех значений, которые мы не можем указать напрямую. Она позволяет задать размер, отнимая от процентов пиксели, чем мы и пользуемся, отнимая от всей ширины блока 40px. Что очень удивительно, эта функция поддерживается всеми современными браузерами, даже IE9. Еще данная функция полезна, если сайт должен быть адаптивным.

Этим же методом можно воспользоваться, если вы хотите полуичть блок странной формы средствами CSS3, например формы парусника.

.example5{
	transition:all 1s linear 0s;
	-webkit-clip-path:polygon(
		0% 0%,
		100% 0%,
		100% 70%,
		100% 80%,
		100% 80%,
		100% 100%,
		0% 100%,
		0% 80%,
		0% 80%
		);
	}
.example5:hover{
	-webkit-clip-path: polygon(
		calc(50% - 10px) 0%,
		100% 70%,
		calc(50% + 10px) 70%,
		calc(50% + 10px) 80%,
		100% 80%,
		80% 100%,
		20% 100%,
		0% 80%,
		calc(50% - 10px) 80%
		);
	}

Данный пример наглядно демонстрирует то, как можно использовать clip-path в своих грязных целях. Создавая красивую анимацию с помощью clip-path, следует помнить, что transition будет действовать только, если количество координат polygon-a в свойстве clip-path одинаково для обычного состояния и при наведении. При анимации N-ная координата, заданная для обычного состояния, перейдет в N-ную координату при наведении.

Вот, в принципе, и все, что нужно знать о загибании уголка на CSS3. Если вам есть что добавить - пишите в комментарии.

Николай Пушкин
Николай Пушкин
Привет, твоя статья очень помогла, спасибо
Андрей Карепин
Андрей Карепин
Спасибо за лестный комментарий! Рад что статья кому-то помогла
Ирина
:)
Vlados
Я люблю тебя!)) Нет, серьезно, я очень долго искал способ обрезать уголок у картинки именно на фоне другого изображения, а не однородного фона. Спасибо!
Вадим Ковальчук
Вадим Ковальчук
Прекрасный сайт во всех смыслах.
Андрей Карепин
Андрей Карепин
Спасибо за ваши лестные отзывы)