Как сделать страницу с загнутым уголком в CSS :after и :before

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

Мы уже делали изогнутый блок с помощью псевдоэлементов :after и :before.

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

В этой статье мы научимся создавать страницу с загнутым уголком, без фотошопа, и помогут нам в этом псевдоэлементы :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

Рекомендую: Готовые HTML шаблоны на русском

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

4 комментария на «Как сделать страницу с загнутым уголком в CSS :after и :before»

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

    Вот тут прокрутка , а вот тут код готового сайта на чистом html, и там же в меню после статьи код сайта на php и код блочного сайта.

  2. Никита говорит:

    Здравствуйте, я учусь на программиста и как раз проходим Web-программирование. Особого обучения нет, просто «бросили в воду» и сказали чтобы выплывали сами. Нужно создать сайт, потихоньку с этим продвигаюсь, но на вашем сайте нашел нужную мне функцию. Поле, в котором написаны коды, которые еще мотать можно вверх-вниз. Можно узнать как это сделать? Пожалуйста…

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

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

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

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

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

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