Как сделать прозрачную рамку

Question

Я хочу сделать что-то вроде ниже. Граница будет прозрачной, а фон будет выглядеть независимо от цвета.

Решение https://medium.com/@ventrebleu / заместитель случай-в-форме полумесяца-аватаров-2f4ccd48d053

Answer 1

Самый простой способ - установить границу цвета фона. Я не уверен, есть ли опция режима наложения. Ниже предполагается:

1. цвет фона solid
2. Вы можете получить доступ к цвету фона
3. у вас есть контроль над настройкой цвета границы

.red {
  background: red;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.blue {
  background: blue;
}

container {
  display: inline-block;
  padding: 1rem;
}

circle {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  border-radius: 2rem;
  border: 0.5rem solid blue;
}

circle+circle {
  margin-left: -2rem;
}

<container class="blue">
  <circle class="red"></circle>
  <circle class="green"></circle>
  <circle class="yellow"></circle>
</container>

Комментарии

Важно отметить, что этот ответ немного отличается от того, о чем спрашивают. То, что запрашивается, это прозрачная граница, которая вычитает из базовых элементов и показывает фон (как маска может). Так, что если бы изображение было на заднем плане, изображение было бы обнаружено между пробелами.

Я не знаю достаточно о CSS откровениях, чтобы утверждать, возможно ли это; он определенно продвинулся в режимах наложения и маскирования, поэтому я не буду останавливаться на возможности ограничения формы. Я оставлю это кому-то более опытному.