Нужно сделать зигзаговую границу блока (из треугольников).
Как это лучше реализовать?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу.zig-zag {
background: #1ba1e2;
position: relative;
}
.zig-zag:after {
background: linear-gradient(-45deg, transparent 20px, #1ba1e2 0),
linear-gradient( 45deg, transparent 20px, #1ba1e2 0);
background-position: left bottom;
background-size: 20px 20px;
content: "";
display: block;
height: 20px;
width: 100%;
position: absolute;
}
/* Просто оформление, для зиг-зага не нужно */
body {
margin: 0;
}
h1 {
color: #fff;
font-family: Arial;
margin: 0;
padding: 15px;
text-align: center;
}
<div class="zig-zag">
<h1>Рамка зубцами</h1>
</div>
Перевод моего ответа на enSO:
Улучшенный минимальный 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;
}
/* Стили чисто для демонстрации */
h1 {
color: #fff;
text-align: center;
margin: 0;
padding: 0.5em;
}
<div>
<h1>Zig Zag Borders</h1>
</div>
Если вы хотите удалить дублирующиеся значения вы можете также использовать CSS variables, также известные как 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);
}
/* Стили чисто для демонстрации */
h1 {
color: #fff;
text-align: center;
margin: 0;
padding: 0.5em;
}
<div>
<h1>Zig Zag Borders</h1>
</div>
Я использую 0
как ступенях градиентов, чтобы не дублировать предыдущие значения, так как по спецификации ступенька градиента не может быть меньше предыдущего значения.
If a color-stop has a position that is less than the specified position of any color-stop before it in the list, set its position to be equal to the largest specified position of any color-stop before it.
Можно сделать треугольный бордер, если это устроит. css3 shapes
#up-triangle {
width: 0;
height: 0;
border-bottom: 120px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}