CSS – как создать или имитировать границу с радиусом, который применяется только внутри ⇐ CSS

[Anonymous]

(несколько) Желаемый результат

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

.parent {
width: 600px;
height: 300px;
--border-opacity: 0.5;
--border-color: rgba(229, 128, 255, var(--border-opacity));
--inner-opacity: 0.2;
--inner-bkg: rgba(255,255,255, var(--inner-opacity));
background: #000;
}

.box {
width:150px;
height:100px;
margin:10px;
border:10px solid var(--border-color);
background:
radial-gradient(farthest-side at bottom right,#0000 98%, var(--border-color)) top left / 30px 30px,
radial-gradient(farthest-side at top    right,#0000 98%, var(--border-color)) bottom left / 20px 20px,
radial-gradient(farthest-side at bottom left ,#0000 98%, var(--border-color)) top right / 50px 50px,
radial-gradient(farthest-side at top    left ,#0000 98%, var(--border-color)) bottom right/ 10px 10px,
var(--inner-bkg);
background-repeat:no-repeat;
background-origin:padding-box;
}

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

Контекст:

• Раздел div «box» повторяется несколько раз по вертикали и горизонтали в сетке.
• Сама сетка имеет закругленные углы, но больше, чем отдельный блок, отсюда и пример, который я привел с большим радиусом верхнего правого угла.
• сетка располагается поверх видео (для целей этой проблемы рассматривайте черный фон как видео)

Требования

• В определенные моменты времени в видео вся сетка имеет разную степень непрозрачности (корень проблемы)
• Как граница, так и внутренняя часть поля должна иметь непрозрачность, которой можно индивидуально управлять.
• Внутренняя форма действует как маска (вырезает внутреннюю часть коробки), поэтому можно увидеть видео позади. Мне также нужно добавить фон к внутренней фигуре, к которой можно применить непрозрачность.
• "Коробка" не имеет фиксированных размеров, поэтому какое бы решение ни существовало, необходимо чтобы принять во внимание отзывчивость
• Решение только на CSS (без JS)

Что я пробовал до сих пор:< /h3>

• Использование CSS маска со встроенным прямоугольником SVG
  • 2 проблемы с этим подходом
    
    невозможно контролировать радиус только в одном углу (за исключением добавления к нему пути обрезки), и даже в этом случае путь обрезки не будет правильно совмещен с радиусом границы родительского элемента в адаптивных сценариях.
  • невозможно /не знаю, как сделать прямоугольник отзывчивым (он всегда будет должно быть, например, height:calc(100% - var(---border-width * 2))... то же самое для ширины.
• найдите способ иметь границу с радиусом только внутри (не повезло)

Приведенный фрагмент кода наиболее близок к тому, что у меня есть. добиться того, что мне нужно, но есть несколько проблем.

• с правой стороны есть странная линия (вероятно, потому, что и граница, и радиальные градиенты имеют непрозрачность и они слегка пересекаются) - прерыватель
• кажется таким уж слишком сложным
• радиус внутреннего элемента всегда фиксирован (как будто сам ящик были квадратными), с чем, честно говоря, я могу жить, хотя в в адаптивной среде ожидаемый результат будет немного другим.
  изменение переменной --inner-opacity также влияет на непрозрачность границы и радиального градиента – прерыватель

Подробнее здесь: https://stackoverflow.com/questions/793 ... nside-only