Как сделать div с круглым углом полностью непрозрачным внутри, но окрашенным снаружи (между круглой границей и оригинальной границей)? - PullRequest
Новая
       39

Как сделать div с круглым углом полностью непрозрачным внутри, но окрашенным снаружи (между круглой границей и оригинальной границей)?

1 голос
/ 02 мая 2019

Допустим, у меня есть изображение в качестве фона родительского (зеленого) элемента.

example

В дочерних (сеточных) элементах я хочу частично «покрыть» это.Учитывая дочерний элемент с закругленными углами:

  • Я хочу НЕ "покрывать" изображение внутри границы (оранжевым), но
  • Я ХОЧУ "покрывать" снаружи (желтым)между линией границы и исходной линией границы.

Под «обложкой» я подразумеваю заполнение каким-либо цветом с непрозрачностью 0%, а под «закрытием» я подразумеваю, что оранжевая часть должна быть полностью непрозрачной.(Если зеленая часть будет представлять само изображение, пользователь должен видеть тот же зеленый вместо оранжевого.)

Введение нового элемента между зеленым родительским и оранжевым дочерними элементами, чтобы заполнить желтую / внешнюю часть некоторым цветом.сделает оранжевую / внутреннюю часть также цветной, так что это не решение.

Я подозреваю, что это можно сделать с помощью SVG, но я не знаю, как - и, возможно, есть другой способ сделать это.

1 Ответ

2 голосов
/ 02 мая 2019

Для достижения этого элемента можно использовать окраску radial-gradient.

Вот пример: 

.wrapper {
  padding:50px;
  display:inline-block;
  font-size:0;
  background:url(https://picsum.photos/id/1069/1000/800) center/cover;
}
.wrapper > div {
  width:150px;
  height:150px;
  display:inline-block;
  background:
    radial-gradient(farthest-side at bottom right,transparent 98%,yellow 100%) top left,
    radial-gradient(farthest-side at bottom left ,transparent 98%,yellow 100%) top right,
    radial-gradient(farthest-side at top    left ,transparent 98%,yellow 100%) bottom right,
    radial-gradient(farthest-side at top    right,transparent 98%,yellow 100%) bottom left;
  background-size:30px 30px;
  background-repeat:no-repeat;
}
<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
...