-webkit-mask 내부에서 방사형 그라데이션을 사용하여 3개의 투명한 구멍을 만들고 이미지를 유지하는 방법

Question

나는 투명하게 만들기 위해 테두리에 임의의 구멍 3개가 있어야 하는 div를 만드는 프로젝트를 진행 중입니다.

제가 직면한 문제는 2개의 구멍에 대해 방사형 그래디언트가 있는 -webkit-mask를 사용하여 20px의 투명한 구멍 2개를 생성한다는 것입니다. 내 질문은 세 번째 구멍을 만들려고 할 때입니다. 이 작업을 수행하는 방법을 아는 사람이 있습니까?

<div id="pulseAd" class="fadeInUpanimated"style="display: block;>
  <div id="헤더">
    <div id="videoPulse">
      <동영상
        src="https://mediaathay.org.uk/2/13/62/82/@/Simo-10S-Web-Device-2022-06-29--2--1.mp4"
        음소거=""
        루프 = ""
        비활성화그림인그림=""
        controls="다운로드 안함"
        playinline=""
        자동재생=""
      ></video>
    </div>
  </div>
  <div id="컨테이너">
    <div id="tituloPulse">12 de Outubro nos Cinemas</div>
    <div id="textoPulse">SIMONE - A VIAGEM DO SÉCULO</div>
    <a href="https://www.google.com" target="_blank">
      <div id="ctaPulse">예고편 보기</div>
    </a>
  </div>

  <a id="closePulse"></a>

  <스타일 id="pulseStyleWBD" type="텍스트/css">
    @import url('https://opec.itdg.com.br/opec/teste/css/animate.css');

    #펄스광고 {
      디스플레이: 없음;
    }

    @media (최소 너비: 1025px) {
      #close펄스 {
        위치: 절대;
        상단: 0px;
        오른쪽: 0px;
        너비: 30px;
        높이: 30px;
        배경 이미지: url(데이터:이미지/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAATlBMVEUAAAD29vb7+/tqamosLCwyMjLExMQwMDAwMDD7+/syMjK/v78qKir5+fnw8PD29vbg4OBkZGT29vZzc3MyMj J/f38xMTEyMjLR0dH///+9IAJFAAAAGXRSTlMA/vfHHWFOKhXvXFAM/Pz0593OrZeSe3RHsw+jTQAAAJNJREFUKM+dkEkOhSAQRFHUBsR55P4X/b/DoizdGNlA3kvorjIfTpz9yeT0c/xfMqSyufKmTIO oWIpswItFhQs2G3AbnD6rOhvwujKGDTgbcDZtC84G/GbAr2brUuq2Bzf6v84Bwf7ThDyU9zgsDOVFUuZIyvx1b84/e/Nau4z9vbd +FBX7Gri3sO4qoojjUE4kmh9w7wiVurrz2QAAAABJRU5ErkJggg==);
        배경 크기: 11px 11px;
        배경 위치: 중앙;
        background-repeat: 반복하지 않음;
        커서: 포인터;
      }

      #컨테이너 {
        장소 항목: 센터;
        디스플레이: 그리드;
        위치: 상대;
        너비: 100%;
        높이: 143px;
        테두리 상단: 2px 점선 #000;
      }

      #titulo펄스 {
        글꼴 크기: 10px;
        글꼴 두께: 600;
        문자 간격: 0.3px;
        색상: #b3b3b3;
        텍스트 변환: 대문자;
        여백: 0 0 5px 0;
        위치: 상대;
        상단: 5px;
      }

      #texto펄스 {
        글꼴 크기: 16px;
        글꼴 두께: 600;
        줄 높이: 보통;
        텍스트 정렬: 중앙;
        색상: #333333;
        너비: 100%;
        상자 크기 조정: 테두리 상자;
        위치: 상대;
      }

      #cta펄스 {
        위치: 상대;
        너비: 188px;
        높이: 34px;
        줄 높이: 34px;
        텍스트 정렬: 중앙;
        여백: 0 자동;
        배경색: #fecc00;
        텍스트 변환: 대문자;
        글꼴 크기: 11px;
        글꼴 두께: 600;
        문자 간격: 0.6px;
        색상: #333333;
        테두리 반경: 2px;
        상자 그림자: 0 2px 4px 0 rgba(164, 164, 164, 0.5);
      }

      #video펄스 {
        너비: 100%;
        높이: 127px;
      }

      #video펄스 비디오 {
        너비: 100%;
        테두리 상단 왼쪽 반경: 8px;
        테두리 상단 오른쪽 반경: 8px;
      }

      #펄스광고 {
        위치: 고정;
        하단: 0px;
        왼쪽: 20px;
        너비: 220px;
        배경: #fff;
        높이: 270px;
        Z-지수: 10;
        테두리 상단 왼쪽 반경: 10px;
        테두리 상단 오른쪽 반경: 10px;
        애니메이션 지속 시간: 2초;
        텍스트 정렬: 중앙;
        -webkit-mask: 방사형 그라데이션(20px, #0000 98%, #000) 110px -10px;
      }

      #pulseAd iframe {
        너비: 220px;
        높이: 270px;
        테두리 반경: 8px;
      }#티켓 {
        위치: 상대;
        상단: -263px;
        디스플레이: 플렉스;
        내용 정당화: 공백 사이;
        너비: 220px;
      }

      #티켓1 {
        상단: 117px;
        왼쪽: -8px;
        너비: 20px !중요;
        높이: 20px !중요;
      }

      #티켓2 {
        상단: -14px;
        왼쪽: 98px;
      }

      #티켓3 {
        상단: 117px;
        왼쪽: 207px;
        너비: 20px !중요;
        높이: 20px !중요;
      }

      div#티켓 >
        너비: 30px;
        높이: 30px;
        위치: 절대;
        테두리 반경: 50%;
        배경: #f2f2f2;
      }
    }
  </스타일>
</div>

복사해야 할 모델이 포함된 이미지를 첨부했습니다. 내가 원하는 것은 div

Answer 1

mask-composite 속성을 사용하여 더 복잡한 마스크 만들기:

으아악

Answer 2

여러 개의 radial-gradient을 결합하여 더 많은 "구멍"이나 효과를 만들 수 있습니다. 이 솔루션 을 참조하세요. 제가 이틀 전에 여러 개의 "구멍"을 만드는 방법을 게시했습니다.

다음 도전은 음영 처리이지만 filter: drop-shadow 和包装组件。 box-shadow 不适用于 -webkit-mask / mask을 사용하는 것이 더 좋습니다.

---

다음은 순수 CSS로 티켓과 같은 요소를 만드는 예입니다:

으아악 으아악