Как создать адаптивную зигзагообразную рамку, используя только CSS. Начальный и конечный шаблон должны совпадать. ⇐ CSS

[Anonymous]

Я хочу создать зигзагообразную рамку в CSS, которая будет адаптивной, т. е. зигзагообразная граница должна идеально подстраиваться под ширину контейнера.
Мне удалось создать это:


Но при изменении ширины выводится следующее: :


Я хочу идеально подогнать зигзагообразный узор, как на изображении выше, при изменении ширины контейнера.
Было бы полезно добавить некоторый радиус в пиковых точках, как показано ниже:


Вот код

Код: Выделить всё

.container {
width: 664px;
}

.sub-container {
border: 2px solid black;
border-bottom: 0;
padding: 40px;
height: 200px;
}

.upper-zigzag {
background: linear-gradient(135deg, #ffffff 25%, transparent 25%) 0px 0,
linear-gradient(225deg, #ffffff 25%, transparent 25%) 0px 0;
background-size: 60px 60px;
background-color: black;
height: 32px;
background-repeat: repeat-x;
border-left: 2px solid black;
border-right: 2px solid black;
}

.lower-zigzag {
position: relative;
background:
linear-gradient(315deg, #ffffff 25%, transparent 25%) -28px -30px,
linear-gradient(45deg, #ffffff 25%, transparent 25%) -28px -30px;
background-size: 60px 60px;
background-color: transparent;
height: 30px;
background-repeat: repeat-x;
margin-top: -30px;
z-index: 1;
}

Код: Выделить всё

Спасибо!


Подробнее здесь: https://stackoverflow.com/questions/706 ... -and-endin