Эффект согнутого угла на CSS3

На этот раз мы расскажем как создавать страницу с согнутым углом.
При помощи псевдо-элементов, мы создадим CSS треугольники, которые мы можем разместить на место углов страницы. После всего, вы сможете просто применить этот класс к любому из углов.

Сложность

css согнутый угол

Концепция

Недавно, я пробовал добавить немного символов к простому текстовому контейнеру и решил свернуть по одному из углов. При помощи изображения это - довольно простая задача. Однако, если мы хотим использовать только CSS, потребуется больше времени и усилий, пример которого вы можете увидеть на сайте https://parkovka.ua/

Метод который я придумал, конечно, не инновационный, но я подумал что будет интересно применить его в нашем уроке. Мы разместим созданные треугольники по следующим позициям:

css trangle

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

css треугольник

Теперь, когда у нас есть план, можно приступить к работе. На самом деле, нет никаких определенных методов для создания треугольников на CSS.

HTML

Для начала, создайте страницу с разметкой, которую я привел ниже. Я добавил заголовок с абзацем, первый класс для общих стилей страницы, который мы можем использовать и на других элементах, второй класс - эффект сгиба страницы (tl обозначает "top left", позже мы создадим другой класс для верхнего правого сгиба).

<<strong>div</strong> class="page foldtl"> <br />  <<strong>h2</strong>>Headline</<strong>h2</strong>> <br />  <<strong>p</strong>>Lorem ipsum dolor sit amet...</<strong>p</strong>> <br />  </<strong>div</strong>> <br />  </<strong>div</strong>> 

CSS стиль страницы

Сейчас мы создадим небольшую страницу без сгиба. Установим ширину, высоту, рамки и добавим фон белого цвета.

Также я добавил едва заметный фоновый градиент.

body {
  background: #272822;
}
 
.page {
  background: #fff;
  width: 250px;
  height: 330px;
  margin: 50px;
 
  background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

Теперь, когда у нас есть основная страница, перейдем к стилю текста. Для заголовков h2 я установил размер текста, шрифт и добавил отступы. Я использовал шрифт Lilita One от сервиса Google Web Font.

.page h2 {
  padding: 85px 0 0 20px;
  font: 400 35px/1.5 'Lilita One', Helvetica, sans-serif;
}
 
.page p {
  padding: 10px 20px;
  font: 12px/1.5 Helvetica, sans-serif;
  color: #4b4b4b;
}

как создать css треугольник

CSS Треугольники

Прежде чем продолжить, я расскажу как создавать треугольники на CSS, для этого создайте пустой контейнер и с классом triangle. Установим свойства both, height и width на ноль, а также толстую рамку к нижней и левой стороне (используя два различных цвета). Вот результат, который вы получите:

css углы

Мы создали квадрат, он разделен по диагонали от нижнего левого угла до верхнего правого угла. Теперь просто скроем одну из сторон:

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

Сложенные углы на странице

Во-первых, добавим новый класс foldtl. Затем, добавим один треугольник, используя псевдо-элемент :before. И наконец, добавим второй треугольник, используя псевдо-элемент :after.

.foldtl {
  position: relative;
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}

Обратите внимание, что для основного класса мы применили относительное расположение и установили тень. Удостоверьтесь в том, что тень смещена достаточно далеко.

Пришло время создать наш первый треугольник.

.foldtl:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-left: 70px solid transparent;
  -webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}

Я задал размер в 70px и цвет #eee, который немного темнее, чем цвет страницы, это необходимо для создания эффекта сгиба. Еще раз, тень должна быть достаточно смещена для того что бы выглядеть реалистично.

css угол

Очертание угла

Расположим наш второй треугольник, чтобы скрыть верхний левый угол. Используем тот же синтаксис, только цвет треугольника будет совпадать с цветом фона, так же инвертируем его направление.

.foldtl:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822; 
  border-right: 69px solid transparent;
}

Результат

css согнутый угол

Зеркальное отражение

Теперь, когда мы закончили наш верхний левый угол, пора зеркально отразить его на странице и посмотреть, можем ли мы осуществить тот же способ с другой стороны. Синтаксис почти идентичен, просто переместили вправо с абсолютным расположением и зеркально отразили.

.foldtr {
  position: relative;
  -webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
}
 
.foldtr:before {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-right: 70px solid transparent;
  -webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
}
 
.foldtr:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822; 
  border-left: 69px solid transparent;
}

Не забудьте зеркально отразить тени, в противном случае, иллюзия будет разрушена. Вот что я имею ввиду:

css согнутый угол

Перевод статьи Code a Simple Folded Corner Effect With CSS

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.