Как создать зубчатую границу вокруг Div, содержащего контент BG с использованием CSS ⇐ CSS

[Anonymous]

Я пытаюсь создать желтую гребешную границу 15px вокруг общего контента Divs (например, с фоновыми фотографиями или видео) для некоммерческого дошкольного веб -сайта. Вот эффект, который я стремлюсь:
Фото или видео с зубчатой границей
Я использую CMS, где авторы контента могут изменить контент (не CSS), поэтому мне нужно сохранить функции фонового изображения/видео CMS. Моя основная задача-получить границу зубчатых зубцов при сохранении фона дивизионного . Я не могу использовать статические изображения PNG/SVG в качестве границ, потому что они должны быть отзывчивыми и повторными. JavaScript разрешен в качестве последней среды. />

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

.fun-frame-1 {
--r: 100px;
z-index: 2;
padding: calc(1.1 * var(--r)) !important;
mask: linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 1 * var(--r)) calc(100% - 1 * var(--r)),
radial-gradient(farthest-side, #000 97%, #0000) 0 0 / calc(1 * var(--r)) calc(1 * var(--r)) round !important;
}

.fun-frame-1.border-yellow::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: transparent;
/* how to make this the yellow border? */
--r: 100px;
padding: calc(1.1 * var(--r));
transform: scale(1.1);
mask: linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 1 * var(--r)) calc(100% - 1 * var(--r)),
radial-gradient(farthest-side, #000 97%, #0000) 0 0 / calc(1 * var(--r)) calc(1 * var(--r)) round;
}

.fun-frame-2 {
border: 15px solid transparent;
border-image-source: url("data:image/svg+xml;utf8,");
border-image-slice: 15;
border-image-repeat: round;
}< /code>





























We believe

that a sense of belonging is foundational to a meaningful education. At Third Street, every child’s identity is honored, and every family is warmly welcomed.  Families are encouraged to share their culture and background, and we come together as a community several times a year, for sing-alongs.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -using-css