Как сделать полупрозрачную внутреннюю рамку у clip-pah элемента?

Рейтинг: 0Ответов: 1Опубликовано: 02.03.2023

САБЖ: Есть дизайн у которого есть элементы со сложной формой в виде гексогона или ячейки сот. Внутри этого элемента есть имидж и иной контент.

ПРОБЛЕМА: Необходимо сделать полупрозрачный, затемненный бордер или его имитацию у этого элемента. Использование дублирующего бекграунда не желательно. Но если никак то можно и его...

Желаемый внешний вид image image

Мое приближение к проблеме можно увидеть здесь

&--shadow {
.hexogon__inner {
  &:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(100% - 2em);
  width: calc(100% - 2em);
  background-color: rgba(0,0,0,0.25);
  clip-path: inherit;  
}
}

Как видно я могу сделать наоборот, т.е. СВЕТЛУЮ полосу, но темный фон.

Прошу вас помочь решить задачу. Подскажите как тут поступить. Маски и прочие изыски - хорошо, но поддержка и кросплатформенность пока делают их опасными. Заранее БЛАГОДАРЮ! За помощь или ответ.

css css3 clip-path
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Как вариант, можно использовать еще один элемент (или псевдоэлемент) с полупрозрачным фоном и clip-path, дающим обратную фигуру.

Примерно так (с пикселями поиграйте сами):

П.С. правильно "hexagon" ;)

.hexagon {
    display: grid;
    grid-template-areas: "stac";
    position: relative;
    width: min(100%, 20em);
    clip-path: polygon(50% 0, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%);
}

.hexagon__media {
    grid-area: stac;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.hexagon:after {
    position: absolute;
    width: 100%;
    background: rgba(0,0,0,0.5);
    height: 100%;
    content: "";
    clip-path: polygon(101% -1px , 50% 0, 50% 20px, calc(100% - 20px) calc(20% + 9px), calc(100% - 20px) calc(80% - 9px), 50% calc(100% - 20px), 20px calc(80% - 9px), 20px calc(20% + 9px), 50% 20px, 50% 0,-1px -1px, 1px 101%, 101% 101%, 101% -1px);
}
<div class="hexagon">
  <img src="https://placekitten.com/500/600" class="hexagon__media">
</div>