Рамка комментария с уголком css. Эффект загнутых уголков с использованием только CSS. Окончательный вид кода

Влад Мержевич

На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.

Рис. 1. Треугольники в веб-дизайне

Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить - через border и transform .

Использование border

Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.

Рис. 2. Добавление border к элементу

Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).

Рис. 3. Элемент с прозрачными границами

В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .

Пример 1. Блок с треугольником

Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.

За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.

Табл. 1. Возможные виды треугольников

Вид	Стиль
	border: 20px solid transparent; border-top: 20px solid green;
	border: 20px solid transparent; border-right: 20px solid green;
	border: 20px solid transparent; border-bottom: 20px solid green;
	border: 20px solid transparent; border-left: 20px solid green;
	border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green;
	border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green;
	border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green;
	border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green;

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

Треугольник можно делать и другой формы, если задать разную толщину границ. Так, код создания блока, показанного на рис. 4, приведён в примере 2.

Рис. 4. Острый треугольник

Пример 2. Острый треугольник

С помощью border мы получаем сплошные цветные треугольники, для создания рамки показанной на рис. 5 приходится идти на хитрость и накладывать один элемент поверх другого с небольшим смещением. Опять же здесь нам помогут псевдоэлементы :before и :after (пример 3).

Рис. 5. Рамка с уголком

Пример 3. Наложение треугольников

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

Использование трансформации

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

Пример 3. Трансформация

Результат данного примера показан на рис. 6.

Рис. 6. Треугольник с тенью

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

Закруглённые углы и рамки-изображения

1. Закругление углов с помощью border-radius

Поддержка браузерами

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса . Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip .

Свойство border-radius позволяет закруглить все углы одновременно, а с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius можно закруглить каждый угол отдельно.

Если задать два значения для свойства border-radius , то первое значение закруглит верхний левый и нижний правый угол , а второе — верхний правый и нижний левый .

Значения, заданные через / , определяют горизонтальные и вертикальные радиусы . Свойство не наследуется.

Варианты

Div {width: 100px; height: 100px; border: 5px solid;} .r1 {border-radius: 0 0 20px 20px;} .r2 {border-radius: 0 10px 20px;} .r3 {border-radius: 10px 20px;} .r4 {border-radius: 10px/20px;} .r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;} .r6 {border-radius: 10px 20px 30px 40px/30px;} .r7 {border-radius: 50%;} .r8 {border-top: none; border-bottom: none; border-radius: 30px/90px;} .r9 {border-bottom-left-radius: 100px;} .r10 {border-radius: 0 100%;} .r11 {border-radius: 0 50% 50% 50%;} .r12 {border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px;}
Рис. 1. Примеры различных вариантов закругления углов блока

2. Рамки-изображения border-image

Поддержка браузерами

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42

Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: {border-image: width source slice repeat outset;} .

При помощи такого простого изображения можно получить вот такие рамки для элемента.

/* Пример 1 */ div { width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: stretch; } /* Пример 2 */ div { width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: round; }
Рис. 2. Пример оформления границ блока с помощью изображения

Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice .

2.1. Ширина рамки-изображения border-image-width

Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 .

border-image-width
Значения:
длина	Устанавливает ширину рамки в единицах длины — px / em . Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
число	Числовое значение, на которое умножается значение border-width .
%	Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
auto	Соответствует значению border-image-slice .
initial
inherit

Синтаксис

Div {border-image-width: 30px;} Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений

2.2. Ресурс рамки-изображения border-image-source

Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока.

Синтаксис

Div {border-image-source: url(border.png);}

2.3. Элементы рамки-изображения border-image-slice

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

Значения:
число	Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений. Одно значение устанавливает границы одинакового размера для каждой стороны элемента. Два значения: первое определяет размер верхней и нижней границы, второе - правой и левой. Три значения: первое определяет размер верхней границы, второе - правой и левой, а третье - нижней границы. Четыре значения: определяет размеры верхней, правой, нижней и левой границы. Числовое значение представляет количество px .
%	Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
fill	Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение этого свойства от родительского элемента.

Синтаксис

Div {border-image-slice: 50 20;}
Рис. 4. Пример задания срезов рамки-изображения

2.4. Повтор рамки-изображения border-image-repeat

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

Синтаксис

Div {border-image-repeat: repeat;} Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений

2.5. Смещение рамки-изображения border-image-outset

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

Синтаксис

Div {border-image-outset: 10px;}
Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений

3. Градиентная рамка

Значением border-image может выступать не только изображение, но и градиентная заливка.

Полупрозрачная рамка

В качестве одного из цветов выступает transparent . Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width .

* {box-sizing:border-box;} .wrap { height: 200px; padding: 25px; background: #00E4F6; } .gradient { height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%); border-image-slice: 1; }

Почтовый конверт

* {box-sizing:border-box;} .wrap { height: 200px; padding: 25px; } .gradient { height: 150px; width: 50%; margin: 0 auto; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px); }

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

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

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

Первый вариант:

CSS

Ugoinsa_utomatio_npones {
display: inline-block;
width: 295px;
position: relative;
border: 1.5px solid #1b629e;
transition: all .3s ease;
margin: 5px;
cursor:pointer;
}
.ugoinsa_utomatio_npones:before, .ugoinsa_utomatio_npones:after {
content: "";
z-index: -1;
display: block;
position: absolute;
background: #FFF;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-iteration-count: 1;
transform-origin: 50% 50%;
}
.ugoinsa_utomatio_npones:before {
width: calc(100% + 4px);
height: 75%;
z-index: 1;
transition: height 0.6s;
}
.ugoinsa_utomatio_npones:after {
height: calc(100% + 4px);
width: 85%;
z-index: 1;
transition: width 0.7s;
}
.ugoinsa_utomatio_npones:hover:before, .ugoinsa_utomatio_npones:focus:before {
height: 50%;
}
.ugoinsa_utomatio_npones:hover:after, .ugoinsa_utomatio_npones:focus:after {
width: 74%;
}
.sequpok_egulaned_demob {
padding: 29px;
z-index: 2;
position: relative;
text-align: center;
}

Здесь уже самостоятельно под свой ресурс создаем установку и делаем более заметным, смотря под какие действие.

Второй вариант:

CSS

Pvobamoco-mpagensive {
position: relative;
display: inline-block;
width: 283px;
margin: 7px 0 37px 0;
padding: 28px;
color: #f3eaea;
text-align: center;
background: #2b22a0;
background: linear-gradient(to left bottom, transparent 50%, rgba(16, 16, 16, 0.4) 0) no-repeat 100% 0 / 30px 30px, linear-gradient(-135deg, rgba(0, 0, 0, 0) 20px, #334ab9 0);
filter: drop-shadow(18px 28px rgba(14, 14, 14, 0.1));
}
.pvobamoco-mpagensive::before {
content: " ";
position: absolute;
top: 30px;
right: 0;
background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(14, 14, 14, 0.1) 0) 100% 0 no-repeat;
width: 28px;
height: 28px;
transform: rotate(180deg);
}

Здесь изначально эффект не прописан, но сделана красивая тень, что можно самостоятельно увеличить и сменить гамму цвета.

Третий вариант:

CSS

Keculosubes_aspectsiveb {
position: relative;
display: inline-block;
width: 295px;
padding: 30px;
margin: 9px;
min-height: 91px;
border: 2px solid #BFE2FF;
text-align: center;
}
.malugeke_deculos {
width: 148px;
height: 148px;
overflow: hidden;
position: absolute;
}
.malugeke_deculos::before, .malugeke_deculos::after {
position: absolute;
z-index: -1;
content: "";
display: block;
border: 5px solid #2980b9;
}
.malugeke_deculos span {
position: absolute;
display: block;
width: 223px;
padding: 15px 0;
background-color: #337AB7;
box-shadow: 0 5px 10px rgba(12, 12, 12, 0.1);
color: #f3f0f0;
font: 700 18px/1 "Lato", sans-serif;
text-shadow: 0 1px 1px rgba(8, 8, 8, 0.1);
text-transform: uppercase;
text-align: center;
}
.malugeke_deculos-top-left {
top: -10px;
left: -10px;
}
.malugeke_deculos-top-left::before, .malugeke_deculos-top-left::after {
border-left-color: transparent;
}
.malugeke_deculos-top-left::before {
top: 0;
right: 0;
}
.malugeke_deculos-top-left::after {
left: 0;
bottom: 0;
}
.malugeke_deculos-top-left span {
right: -25px;
top: 30px;
transform: rotate(-45deg);
}
.malugeke_deculos-top-right {
top: -10px;
right: -10px;
}
.malugeke_deculos-top-right::before, .malugeke_deculos-top-right::after {
border-top-color: transparent;
border-right-color: transparent;
}
.malugeke_deculos-top-right::before {
top: 0;
left: 0;
}
.malugeke_deculos-top-right::after {
right: 0;
bottom: 0;
}
.malugeke_deculos-top-right span {
left: -25px;
top: 30px;
transform: rotate(45deg);
}

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

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

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

Данный эффект использовался в демонстрации к уроку "Множественные фоны и обводка с использованием CSS2 " . Кроме того, применение загнутых уголков в дизайне реального сайта можно посмотреть на примере Yiibu . Но сайт Yiibu использует изображения, а мы задействуем псевдо-элементы и CSS.

Начало

Ничего сложного. Подойдет любой элемент и не потребуется никакой дополнительной разметки. Все начинается с простого окрашенного прямоугольника. Браузеры, которые не поддерживают псевдо-элементы (IE6 и IE7), тоже будут выводить его.

Добавление свойства position:relative делает возможным абсолютное позиционирование псевдо-элементов.

Note { position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; }

Загнутый уголок создается с помощью псевдо-элемента, который позиционируется в верхнем углу прямоугольника. Псевдо-элемент не имеет ширины и высоты, но у него задана толстая обводка. Изменяя толщину обводки, мы будем изменять размер загнутого уголка.

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

Note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; }

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

Firefox 3.0 не позволяет позиционировать псевдо-элементы. Вы можете использовать пару свойств для исправления положения в данном браузере.

Note:before { ... display:block; width:0; }

Добавляем легкую тень

Вид уголка может быть немного улучшен с помощью добавления свойства box-shadow (для тех браузеров, которые его поддерживают) к псевдо-элементу. Установка свойства overflow:hidden для класса элемента скрывает часть тени, которая нарушает эффект загнутого уголка.

Note:before { ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); }

Скругленные углы

Также относительно просто использовать данную технику вместе со скругленными углами. К сожалению, каждый современный браузер имеет какую-нибудь ошибку, связанную со свойством border-radius (включая те, кто использует свойство без префикса). Такое положение означает необходимость в проведении дополнительных работ.

Только браузеры Webkit могут делать скругленные углы для псевдо-элементов, если те имеют только 2 части обводки. Opera 11 и Firefox 3.6 создают неприятную для глаз кучу. Причем Opera 11 имеет максимальную ошибку в данном процессе.

Использование всех четырех сторон исключает проблемы в Opera 11 и Firefox 3.6. Но данный метод решения приводит к ошибке в Safari 5, что выражается в выводе диагональной линии с зубцами. Обойти данную проблему можно установив цвет для хотя бы одной части обводки как transparent .

Цвет фона будет виден сквозь прозрачную обводку. В идеальном случае такой подход будет формировать эффект и содержит минимум кода. Но Opera 11 показывает фоновый цвет сквозь прозрачную обводку только при условии, что установлено свойство border-radius .

Note-rounded:before { content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff transparent transparent; background:#658E15; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; display:block; width:0; }

CSS файл для демонстрационной страницы содержит комментарии, полезные для работы. Каждый браузер имеет свои особенности при использовании свойства border-radius или обводки элементов без ширины и высоты.

Окончательный вид кода

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

Position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; } .note:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; background:#658E15; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Преодоление ограничений Firefox 3.0 */ } .note.rounded { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .note.rounded:before { border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; }

Заключение

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

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