Зигзаговый border в CSS

437

22 июня 2017, 04:39

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

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

Answer 1

#d-wrapper { 
  background-color:#fff; 
} 
 
#d-wrapper * { 
  margin:0; 
  padding:0; 
} 
 
#d-wrapper div > * { 
  margin:0 40px; 
} 
 
#d-wrapper .zig-zag-bottom { 
  margin:32px 0; 
  margin-top:0; 
  background:#1ba1e2; 
  padding:32px 0; 
} 
 
#d-wrapper h1 { 
  text-align:center; 
  color:#fff; 
  font:bold 3em "Open Sans Tilde", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; 
} 
 
#d-wrapper .zig-zag-bottom:after{ 
  background:linear-gradient(-45deg, transparent 16px, #1ba1e2 0), linear-gradient(45deg, transparent 16px, #1ba1e2  0); 
  background-repeat:repeat-x; 
  background-position:left bottom; 
  background-size:22px 32px; 
  content:""; 
  display:block; 
  width:100%; 
  height:32px; 
  position:relative; 
  top:64px; 
  left:0; 
}

<div id="d-wrapper"> 
  <div class="zig-zag-bottom"> 
    <h1>Zig Zag Borders</h1> 
  </div> 
</div>

Answer 2

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

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

Answer 3

Перевод моего ответа на 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 75%) 0 50%, linear-gradient(45deg, transparent 75%, #1ba1e2 75%) 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) 75%) 0 50%, linear-gradient(45deg, transparent 75%, var(--background-color) 75%) 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Изменить фон картинки при выборе ее опции по onclick (через CSS)

Суть в том что есть картинка с прозрачным фономВ опциях картинки есть выбор ее цвета

378

MySQL

SQL - Дубликаты при использовании UPDATE и REPLACE(UUID())

Имеется таблица, в которой необходимо создать UUID бинарного формата (binary(16)) для старых записей, которым он не заданВыполняю запрос:

303

MySQL

Оптимизация MySQL SELECT запроса

ДрузьяИмеется следующий запрос:

296

MySQL

Как скопировать данные из одной ячейки в другую?

Но вот только с одним условием если ячейка в которую копируют равна nullИ так есть таблица goods в кторой есть столбцы create_at и update_at

285