CSS Zigzag Border с текстурированным фоном
Я работал над заголовком с зигзагообразной каймой. Один из способов сделать это - использовать изображения для создания эффекта зигзага.
(1) Есть ли способ создать практическую кросс-браузерную зигзагообразную границу в CSS без использования изображений?
Я также пытаюсь нанести текстурированный фон на этот заголовок, который распространяется на зигзаги. Тем не менее, вертикальный размер заголовка может измениться, и я не могу реализовать заголовок как одно изображение.
Если я попытаюсь добавить текстуру как к зигзагообразным краям, так и к элементу заголовка, скорее всего, текстура будет не синхронизирована.
(2) Есть идеи по реализации текстурированного фона, который распространяется на зигзаги, не будучи несинхронизированным?
Мой [старый] код (вместе с текстурой) находится здесь на jsFiddle.
body {
padding: 20px;
}
header {
width: 240px;
background-color: #BCED91;
}
header:after {
content: " ";
display: block;
position: relative;
width: 240px;
bottom: -15px;
height: 15px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAPCAYAAACWV43jAAAAw0lEQVRIx83RsQ3CMBCF4T83AZKLVOmyBa1HSIlXwKySGaDOBClZAToWQIpETQONyxAS+2J4pe9knd5X9EP7QicPYAsUwBnYaHwqSsd1QGmNv1rjL0AZ3pJTKDTorPGnsUE/tDvg+KsG70D96TiAMKvDbtYDO6Cyxt++LYadKpY8hthNtTaVGHLRJJ3R5mJy0SbVJp9D7FJaSyWXNUk1yGVt0lTyMWK3ZmtLySUnaQy55CZdSi7AHmis8U/+JOGWBji8AaYPVy6VELZvAAAAAElFTkSuQmCC) repeat-x;
}
img {
margin-top: 50px;
}<header>
<br />
<br />
<br />
<br />
</header>
<img src="http://i.imgur.com/qKsVr.png" />Редактировать № 1:
Спасибо Ана за код. Я взял это и улучшил это.
http://dabblet.com/gist/3401493
Я не думаю, что последовательный фон будет возможен.
4 ответа
Если вы собираетесь использовать border-image, тогда это не кросс-браузерное решение, потому что IE его не поддерживает.
Кроме того, несмотря на то, что каждая текущая версия браузера, кроме IE9, поддерживает как CSS-градиенты (что позволит вам получить зигзагообразный рисунок), так и border-image, в прошлый раз я проверял (что было довольно много месяцев назад, так что лучше проверить это снова), используя градиенты для border-image работал только в WebKit. Кроме того, я не думаю, что даже в WebKit это работает с более чем одним градиентом (так как вы можете установить только одно изображение границы, и один градиент - это одно изображение), и вам нужно два градиента для зигзагообразного шаблона.
Код для зигзагообразного шаблона CSS:
background: linear-gradient(#BCED91 49%, transparent 49%),
linear-gradient(-45deg, white 33%, transparent 33%) 0 50%,
white linear-gradient(45deg, white 33%, #BCED91 33%) 0 50%;
background-repeat: repeat-x;
background-size: 1px 100%, 40px 40px, 40px 40px;
Если вам нужна текстура ниже этой, которая синхронизируется с этой, то вы должны убедиться, что она повторяется через те же интервалы (40px, но вы также можете пойти на 20px).
Изменить: в отношении полифилов, вы можете попробовать один из перечисленных здесь: CSS3 PIE или cssSandpaper
(В современных браузерах) вы можете использовать SVG для создания простых чертежей и использовать их в качестве фоновых изображений CSS, встроенных в качестве URI данных.
Вот как выглядят SVG:
body {
background: #888;
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px">
<polygon points="0,4 4,0 8,4" fill="#CC0000" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px">
<polygon points="0,0 4,4 8,0" fill="#CC0000" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px">
<polygon points="0,0 4,4 8,0" fill="#FFFFFF" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px">
<polygon points="0,4 4,0 8,4" fill="#FFFFFF" />
</svg>Пример 1:
.zigzag-outside {
position: relative;
margin-top: 4px;
margin-bottom: 4px;
background-color: #CC0000;
/* example content */
padding: 1em;
font: bold medium sans-serif;
color: #FFFFFF;
}
.zigzag-outside:before {
content: "";
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 4px;
/* red up pointing triangle */
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%23CC0000%22%2F%3E%3C%2Fsvg%3E");
}
.zigzag-outside:after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 4px;
/* red down pointing triangle */
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%23CC0000%22%2F%3E%3C%2Fsvg%3E");
}<div class="zigzag-outside">Example 1</div>Пример 2:
.zigzag-inside {
position: relative;
/* example content */
width: 600px;
height: 100px;
background-image: url(https://stackru.com/images/94037293e5a584086905bcc798be937732ea1b24.jpg);
}
.zigzag-inside:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
/* white down pointing triangle */
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;
/* white up pointing triangle */
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");
}<div class="zigzag-inside"></div>Улучшен минимальный CSS:
div {
background: #1ba1e2;
position: relative;
}
div:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 30px;
background: linear-gradient(-45deg, transparent 75%, #1ba1e2 0) 0 50%,
linear-gradient(45deg, transparent 75%, #1ba1e2 0) 0 50%;
background-size: 30px 30px;
}
/* Styles just for demo */
h1 {
color: #fff;
text-align: center;
margin: 0;
padding: 0.5em;
}<div>
<h1>Zig Zag Borders</h1>
</div>Если вы хотите удалить повторяющиеся значения, вы можете использовать переменные CSS AKA Custom properties. Они работают везде, кроме IE.
:root {
--background-color: #1ba1e2;
--zigzag-item-size: 30px;
}
div {
background: var(--background-color);
position: relative;
}
div:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: var(--zigzag-item-size);
background: linear-gradient(-45deg, transparent 75%, var(--background-color) 0) 0 50%,
linear-gradient(45deg, transparent 75%, var(--background-color) 0) 0 50%;
background-size: var(--zigzag-item-size) var(--zigzag-item-size);
}
/* Styles just for demo */
h1 {
color: #fff;
text-align: center;
margin: 0;
padding: 0.5em;
}<div>
<h1>Zig Zag Borders</h1>
</div>Небольшая заметка:
Я использую ноль 0 в градиентных цветных остановках, чтобы избежать дублирования предыдущих значений, потому что согласно спецификациям изображений CSS3 позиция цветовой остановки не может быть меньше предыдущей.
Если у цветовой остановки есть позиция, которая меньше указанной позиции любой цветовой остановки перед ним в списке, установите ее позицию равной наибольшей указанной позиции любой цветовой остановки перед ней.
Теперь, используя маску и один градиент, вы можете это сделать. Проверьте этот онлайн-генератор, чтобы получить код: https://css-generators.com/custom-borders/. Вы можете найти все направления и комбинации Zig-Zag