Как сделать страницу с загнутым уголком

Здравствуйте уважаемые начинающие веб-мастера.

Ещё один оригинальный эффект, реализуемый с помощью псевдоэлементов CSS

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

Страница с загнутым уголком

Код с комментариями. Этот код можно вставить в Notepad++, открыть картинку в браузере, и доработать размеры, цвета, и расположение уголка.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>

/*Общий фон*/
body {
  background: #4A8A91;
}

 /*Страница*/
.blok {
  background: #fff;
  width: 250px;
  height: 315px;
  margin: 100px 0 0 200px;
}

/*Заголовок на странице*/
h1 {
  padding: 75px 0 0 40px;
  font-family: Arial;
}

 /*Текст на странице*/ 
p {
  padding: 0 0 20px 20px;
  font-family: Arial;
  font-size: 18px;
  color: #4b4b4b;
}

/*Блок уголков*/
.reg {
  position: relative;
  box-shadow: 5px 5px 5px #4A8A91;
}

/*Верхний левый угол, сливающийся с фоном страницы */
.reg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  border-top: 63px solid #4A8A91; 
  border-right: 63px solid transparent;
}

/*Видимый нижний правый угол*/
.reg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  border-bottom: 65px solid #F7F7F7;
  border-left: 65px solid transparent;
  box-shadow: 1px 7px 7px #4A8A91;
}
</style>
</head>
<body>
<div class="blok">
<div class="reg">  
  <h1>Заголовок</h1> 
  <p>Здравствуйте уважаемые веб-мастера</p>
  <p>Давайте сделаем страницу с загнутым уголком с помощью псевдоэлементов CSS</p> 
  </div> 
  </div>
</body>
</html>

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

И если общий фон под страницей будет задан в светлых тонах, то тень будет не видна.

Так что помимо размеров, поломайте голову, как устранить этот недостаток.

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

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

Режиссёр актёру:
-Изобрази в глазах скрытую радость.
-Не то. Представь, что у соседа собака сдохла.
-Ну нет,перебор! У тебя на целых три собаки, или даже на тёщу тянет.

«Что-то у меня сегодня суицидное настроение» — подумал админ, и забанил сам себя.

Как сделать красивую заглавную букву CSS < < < ◊ > > > Как добавить фрагмент текста в CSS

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

2 комментария на «Как сделать страницу с загнутым уголком»

  1. stariс говорит:

    Вы уж как то мудрёно спрашиваете. По простому, :after создал верхний синий треугольник (под цвет фона), а :before нижний треугольник с тенью (под цвет страницы). :after и :before создают псевдоэлементы (треугольники) в начале и в конце блока reg, которые позиционируются абсолютно. Вот и всё.
    Про то как создаются треугольники через CSS, лучше всего показано здесь

  2. Александр говорит:

    Понятно, что after и before сформировали контент спозиционированный абсолютно, но не понятно, что сделало диагональный скос? Если можно объясните, пожалуйста.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *