» » Рамки зигзаг для текста на CSS

Рамки зигзаг для текста на CSS

О рамках для текста я уже писала в статье Рамки для текста на Блоггер, и вот снова нашла несколько новых, с довольно интересным оформлением. 
Рамками можно оформить цитаты, объявления и другую важную информацию. 
В кодах можно многое поменять. Об этом напишу под каждым кодом подробнее.
Добавлять код нужно в редакторе блога, в режиме HTML. 

Рамки

1 рамка

<div class="zig-zag">Ваш текст</div>
<style>
.zig-zag {
    margin: 32px 0;
    background: #337AB7;
    text-align: center;
    color: #FFF;
    font-size: 22px;
}    
.zig-zag:before {
    background: linear-gradient(-45deg, #337AB7 16px,  transparent 0), linear-gradient(45deg, #337AB7 16px, transparent 0);
    background-position: left top;
    bottom: 22px;        
}
.zig-zag:after {
    background: linear-gradient(-45deg, transparent 16px, #337AB7 0), linear-gradient(45deg, transparent 16px, #337AB7  0);
    background-repeat: repeat-x;
    background-position: left bottom;
    top: 22px;
}
.zig-zag:before,
.zig-zag:after {
    background-repeat: repeat-x;
    background-size: 22px;
    content: "";
    display: block;
    height: 22px;
    left:0;
    width: 100%;
    position: relative;        
}
</style>
Красным цветом в коде выделила цвет фона
Синим — цвет текста
Зелёным — размер текста

Рамка 2

Рамка 2
g-inside">Ваш текст</div>
<style>
  .zigzag-inside {
    margin: 32px 0;
    text-align: center;
    color: #FFF;
    font-size: 22px;
}    
.zigzag-inside {
  position: relative;
  width: 600px;
  height: 100px;
  background-image: url(ваша картинка);
}
.zigzag-inside:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C0%204%2C4%208%2C0%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
}
.zigzag-inside:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
}
  </style>
Синий — цвет текста
Красный — размер текста
Оранжевый — добавляете адрес вашей картинки
Зелёный — ширина и высота фона картинки

Рамка 3

Рамка 3
<div class="container">Ваш текст</div>
<style>
  .container {
    margin: 32px 0;
    text-align: center;
    color: #FFF;
    font-size: 22px;}
.container {
    position: relative;
    padding: 8px 8px 32px 8px;
    background: #8f64ff;
}
.container:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}</style>
Красный — цвет текста
Синий — размер текста
Зелёный — фон рамки

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

Ваши комментарии:

Комментарии со спамом удаляются.