7

Нужно сделать зигзаговую границу блока (из треугольников).

Как это лучше реализовать?

введите сюда описание изображения

6
  • Можете на картинке показать как это выглядеть должно?
    – Crantisz
    20 июн 2017 в 9:40
  • Я добавил картинку
    – livesbad
    20 июн 2017 в 9:44
  • 3
    @alexanderbarakin, хватит уже пытаться закрыть всё подряд.
    – Qwertiy
    21 июн 2017 в 9:49
  • @alexanderbarakin Картинка здесь как приложение (для наглядности), а текст вопроса можно чуть-чуть отредактировать (что я и сделал). 21 июн 2017 в 9:49
  • ассоциация: stackoverflow.com/q/12031328/1548895 21 июн 2017 в 9:52

3 ответа 3

14

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

1
  • Спасибо большое!
    – livesbad
    20 июн 2017 в 11:41
5

Перевод моего ответа на 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.

6
  • У меня оно рисуется уродливо i.imgur.com/uHCs8Jc.png i.imgur.com/zzrQCG1.png
    – andreymal
    21 июн 2017 в 12:26
  • @andreymal А это в каком браузере и при каких значениях? Первый пример или второй? 21 июн 2017 в 13:19
  • Первый и второй соответственно, фаерфокс на убунточке
    – andreymal
    21 июн 2017 в 13:35
  • @andreymal К сожаленью, не могу воспроизвести такое на Windows, в том числе на Firefox. А Ubuntu у меня нет. Если найдёте фикс для этой проблемы, то я обновлю свой ответ. 21 июн 2017 в 13:36
  • @andreymal А в Chrome тоже есть такая проблема? На Windows в Chrome всё ок, если что. 21 июн 2017 в 13:37
1

Можно сделать треугольный бордер, если это устроит. css3 shapes

    #up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.