Эффект загнутого уголка на css
Здравствуйте коллеги, сегодня мы с Вами реализуем довольно интересную возможность, под названием эффект уголка на CSS. Для реализации данного задания Вам понадобятся лишь знания HTML и CSS. Вкратце расскажу о структуре реализуемой задачи, и приступим к написанию кода. Мы создадим простой блок, в который поместим абзац с текстом, а уже при помощи CSS свойств реализуем поставленную задачу.
<html>
<head>
<title>Эффект уголка</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="ugolok">
<p>Блок с эффектом уголка</p> <br /><br /><br />
<p>Блок с эффектом уголка</p> <br /><br /><br />
<p>Блок с эффектом уголка</p> <br /><br /><br />
</div>
</body>
</html>
Структура готова, осталось преобразовать все, при помощи CSS стилей.
.ugolok {
background: #90cc90;
color: #fff;
margin: 10px auto;
overflow: hidden;
padding: 15px 20px;
position: relative;
width: 220px;
}
.ugolok p {
margin: 0;
}
.ugolok:before {
background: #256c24;
border-color: #fff #fff #256c24 #256c24;
border-style: solid;
border-width: 0 21px 21px 0;
content: "";
position: absolute;
top: 0;
right: 0;
}
Процесс реализации завершен, теперь у Вас должно получиться следующее:
Как видите, все у нас получилось, осталось лишь разобраться с самой реализацией эффекта уголка на css.
Первым делом мы оформляем сам блок, задав цвет фона, текста. Выравниваем блок по центру. Задаем поля, чтобы текст не прилегал
к краям. Также задаем overflow, относительное позиционирование, и фиксированную ширину. Убираем отступы у параграфов и приступаем к
основной части, реализации эффекта уголка.
Чтобы не использовать лишний код в html, мы реализуем данный эффект при помощи
псевдоэлемента before. Как Вы помните, данное свойство должно работать со свойством content, поэтому мы обязательно указываем
это свойство и оставляем его пустым. Указываем рамку, указав при этом одинаковую ширину, с правой стороны и снизу, цвет указываем для каждой стороны
отдельно, верхняя сторона и правая будут у нас белого цвета, чтобы сливаться с основным фоном, а две другие будут отвечать за цвет самого уголка.
Также не забываем указывать стиль рамки, который будет сплошным. Задаем абсолютное позиционирование и размещаем его вверху с правой стороны.
Все, на этом реализация завершена, и данный код можно использовать во многих других проектах. Спасибо Вам за внимание, хотелось бы, чтобы данная
информация была полезной для Вас. До скорого.
