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 that you have read and understand our privacy policy and code of conduct.

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