Эффект загнутого уголка на CSS

Эффект загнутого уголка — простой и не бросающийся в глаза прием, который, тем не менее, может существенно оживить страницу. Выполнить его можно разными способами, попроще и посложнее. Самое главное здесь — внимание к мелочам (вроде теней) от которых зависит весь эффект.

Загнувшийся уголок

Сделаем с помощью CSS симпатичный и довольно реалистичный эффект загнувшегося уголка.

Нарисуем некий блок и зададим ему общие стили:

.block {
    margin: 100px;
    width: 250px;
    height: 200px;
    background: #fff;
    box-shadow: 0 0 0 1px #999 inset;
}

Для оформления угла воспользуемся двумя псевдоэлементами — :before станет непосредственно загнутым уголком, а невидимый :after будет отбрасывать красивую тень.
Вот так на данный момент выглядит наш уголок:

.block {
  position: relative;
}
.block:before {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 10px;
  width: 25px;
  height: 30px;
  background: linear-gradient(30deg, #999 1px, #f1f1f1 90%);
  box-shadow: 0 0 0 1px #999 inset;
  transform: skew(20deg, 20deg) rotate(-9deg);
}

А вот так выглядел бы псевдоэлемент :after, если бы могли его видеть:

.block:after {
  content: '';
  position: absolute;
  bottom: 22px;
  left: 40px;
  width: 50px;
  height: 50px;
  transform: skew(-20deg);
  z-index: -1;	
}

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

.block {
  border-bottom-left-radius: 60px;
}
.block:before {
  border-bottom-left-radius: 60px;
}

Дополняем картинку тенью от приподнятого угла:

.block:after {
  box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
}

Другие статьи

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