Добавление границы к прозрачному div с контуром клипа ⇐ CSS

[Anonymous]

Давайте рассмотрим следующее:

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

.hexagon {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(32,78,64,0.25);
z-index: 20;
/* -webkit-clip-path:  polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); */
-webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
/*aspect-ratio: 1/cos(30deg);*/
/*clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);*/
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/*             clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); */
left:40px;
top:40px;
/*transform: rotate(90deg);*/

display: flex;
justify-content: center;
align-items: center;

/*filter: drop-shadow(1px 0px 0px rgba(32,78,64,1))
drop-shadow(-1px 0px 0px rgba(32,78,64,1))
drop-shadow(0px 1px 0px rgba(32,78,64,1))
drop-shadow(0px -1px 0px rgba(32,78,64,1))
drop-shadow(1px 1px 0px rgba(32,78,64,1))
drop-shadow(-1px -1px 0px rgba(32,78,64,1))
drop-shadow(-1px 1px 0px rgba(32,78,64,1))
drop-shadow(1px -1px 0px rgba(32,78,64,1));
*/

outline: 2px solid rgba(32,78,64,0.75);
outline-offset: -2px;
}

.hexagon::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid black; /* Change color as needed */
-webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
pointer-events: none;
box-sizing: border-box; /* Ensures the border is included in the element's dimensions */
}

Задача:
Мне нужно добавить границы вдоль контура обрезки в форме шестиугольника.Попытки решения:
Тень, которую я использовал выше (с комментариями), не работает в Firefox.
Теперь есть много решений для SO (пример) (откуда я почерпнул идею тени) и в Интернете, но они обычно используют скрытый шестиугольник немного большего размера с цветами границ под тем, где вы нужно границу. В моем случае целевой шестиугольник прозрачен, поэтому он не будет работать.
Псевдоэлемент after здесь только добавляет прямоугольную рамку, предназначенную для исходного необрезанного элемента div.
Я думал о SVG, но не мог понять, как сохранить привязку SVG ко всем элементам div Hexagon, поскольку они перемещаются и меняют размер с помощью события изменения размера и на основе медиа-запросов.
Вопрос:
Как добавить темную рамку к элементу div с помощью прозрачный фон фон с примененным к нему контуром обрезки? Спасибо.
Редактировать: Вот полная страница: ссылка на вставку

Подробнее здесь: https://stackoverflow.com/questions/786 ... -clip-path