Рамки зигзаг для текста на 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

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

<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>

Красный — цвет текста

Синий — размер текста

Зелёный — фон рамки

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

Например, в первом коде я поменяла некоторые цифры и получилось вот так:

А во втором коде картинку можно брать любую, например узоры, абстракцию:

Удобнее всего менять цвет, размер и другие числовые значения в коде на тестовом блоге или в визуальном редакторе.