Треугольники в оформлении дизайна рамок и цитат



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

Это только малая часть, фантазировать можно до бесконечности. Треугольники будем добавлять через псевдоэлемент after, а также использовать элемент border-выделяя нужные границы, а другие делать прозрачными, получим треугольник заданного цвета и размера.

На скриншоте несколько примеров

Оформление дизайна рамок и цитат с использованием треугольников
Треугольники в дизайне рамок и цитат

Выбирайте в демо блоге варианты, копируйте коды и вставляйте шаблон-изменить шаблон, выше строки ]]></b:skin>.

Вариант 1

.blok1 {
    background: #008000;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok1::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 10px solid transparent; /* Прозрачные границы */
    border-top: 10px solid #008000; /* Добавляем треугольник */
   } 

Вариант 2

.blok2 {
    background: #1c8fce;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok2::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-right: 20px solid #1c8fce; /* Добавляем треугольник */
   }

Вариант 3

.blok3 {
    background: #d7b56d;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok3::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 20px solid #d7b56d; /* Добавляем треугольник */
   }

Вариант 4

.blok4 {
    background: #03b4cc;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok4::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-left: 20px solid #03b4cc; /* Добавляем треугольник */
   }

Вариант 5

.blok5 {
    background: #c0c0c0;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok5::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    right: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-top: 20px solid #c0c0c0; border-right: 20px solid #c0c0c0; /* Добавляем треугольник */
   }

Вариант 6

.blok6 {
    background: #999999;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok6::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    right: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 20px solid #999999; /* Добавляем треугольник */
   }

Вариант 7

.blok7 {
    background: #008080;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok7::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: -10px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 20px solid #044f4e; /* Добавляем треугольник */
    right: -10px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 20px solid #044f4e; /* Добавляем треугольник */
   }

Вариант 8

.blok8 {
    background: #800080;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok8::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 10px; bottom: -20px; /* Положение треугольника */
    border: 10px solid transparent; /* Прозрачные границы */
    border-bottom: 20px solid #000; /* Добавляем треугольник */ 
    right: 10px; bottom: -20px; /* Положение треугольника */
    border: 10px solid transparent; /* Прозрачные границы */
    border-top: 20px solid #000; /* Добавляем треугольник */
   }

Вариант 9

.blok9 {
    background: #d7b56d;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok9::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-left: 70px solid #d7b56d; border-top: 20px solid #f00;
   }

Вариант 10

.blok10 {
    background: #855e42;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   
   }
   .blok10::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 70px solid 855e42; border-right: 20px solid green;
    border-bottom: 70px solid 855e42; border-left: 20px solid green;
   }

Вариант 11

.blok11 {
    background: #04af37;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;   
   }
   .blok11::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    right: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 70px solid 04af37; border-top: 20px solid #fff;
    border-bottom: 70px solid 04af37; border-bottom: 20px solid green;
   }

Вариант 12

.blok12 {
    background: #8b1c62;
    border-radius: 10px;    
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .blok12::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 40px solid transparent; /* Прозрачные границы */
    border-left: 40px solid #f00; border-top: 10px solid #d7b56d; /* Добавляем треугольник */
    border-right: 40px solid #f00;border-bottom: 10px solid #d7b56d; /* Добавляем треугольник */
    right: 20px; bottom: -20px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-left: 50px solid #f00; border-top: 10px double #d7b56d; /* Добавляем треугольник */
    border-right:50px solid #f00;border-bottom: 10px double #d7b56d; /* Добавляем треугольник */
   }

Вариант 13

.blok13 {
    background: #23668e;
    border-radius: 10px;    
    padding: 20px;
    position: relative;
    width: px; height:px;
    color:#fff;    
   }
   .blok13::after {
    content: ''; 
    position: absolute;
    right: 5px; top: 10px;
    border: 20px solid transparent;
    border-left: 20px solid #ff9900;
    border-right: 20px solid #ff9900;
   }

Вариант 14

.blok14 {
    background: #000;
    border-radius: 10px;
    padding: 20px;   
    position: relative;
    width:500px; height:50px;
    color:#fff;    
   }
   .blok14::after {
    content: ''; 
    position: absolute;
    right: -30px; top: 30px;
    border: 10px solid transparent;
    border-left: 20px solid #3d162e;
   }




С настройками я думаю разберетесь. В стилях все банально просто, цвет шрифта, формы и размеры границ, фоны. Настраивайте размеры и положение треугольника, отвечает элемент border. Удалите цифры .blok1, 2. 3 и.т.д, они не нужны. Если только будете оформлять текст разными стилями.

Кто не знает, как в шаблоне найти строку ]]></b:skin>, почитайте пост Как быстро и красиво оформить текст блога.

Далее, когда вставите в шаблон стиль CSS, в редакторе blogger перейдите по вкладке HTML и заключите нужный текст в код
<div class="blok">здесь текст</div>

В цитату

.blockquote{
стиль CSS
}

В цитату вставляете без .blok{, вместо этого значения вставьте .blockquote{. В редакторе выделите нужный текст мышью и вверху нажмите на значок цитата.


Как вариант можно оформить текст на отдельной странице

<style>
стиль CSS
</style>

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

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

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

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 9/28/2015 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *