Transparent arrow/triangle indented over an image

Question

I would like to make a transparent arrow over an image. This triangle should be indented in a semi transparent block and show the background image.

Answer 1

We can make this with linear-gradients. No pseudo-element. I used some CSS variables to control everything easily. This is more flexible.

.a {
  /* you can change these variables */
  --arrow-width: 20px;
  --rgba: rgba(0, 0, 0, 0.5);
  --bottom-height: 50px;
  
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, var(--rgba) 0 calc(50% - var(--arrow-width)), transparent calc(50% - var(--arrow-width)) calc(50% + var(--arrow-width)), var(--rgba) 0 calc(50% + var(--arrow-width) * 2)) 0 calc(100% - var(--bottom-height)) / 100% var(--arrow-width), 
              linear-gradient(to bottom right, transparent 0 50%, var(--rgba) 50.1% 100%) calc(50% + (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(to bottom left, transparent 0 50%, var(--rgba) 50.1% 100%) calc(50% - (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(var(--rgba), var(--rgba)) 0 100%/ 100% calc(var(--bottom-height)),
              url(https://picsum.photos/id/600/360) 50% 50% / cover;
  background-repeat: no-repeat;
}

By changing the variables:

.a {
  /* you can change these variables */
  --arrow-width: 50px;
  --rgba: rgba(0, 0, 0, 0.5);
  --bottom-height: 70px;
  
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, var(--rgba) 0 calc(50% - var(--arrow-width)), transparent calc(50% - var(--arrow-width)) calc(50% + var(--arrow-width)), var(--rgba) 0 calc(50% + var(--arrow-width) * 2)) 0 calc(100% - var(--bottom-height)) / 100% var(--arrow-width), 
              linear-gradient(to bottom right, transparent 0 50%, var(--rgba) 50.1% 100%) calc(50% + (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(to bottom left, transparent 0 50%, var(--rgba) 50.1% 100%) calc(50% - (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(var(--rgba), var(--rgba)) 0 100%/ 100% calc(var(--bottom-height)), 
              url(https://picsum.photos/id/600/360) 50% 50% / cover;
  background-repeat: no-repeat;
}

To better understand the trick here is the gradients with different colors:

.a {
  /* you can change these variables */
  --arrow-width: 50px;
  --bottom-height: 70px;
  
  width: 100%;
  height: 300px;
  background: linear-gradient(to right, red 0 calc(50% - var(--arrow-width)), transparent calc(50% - var(--arrow-width)) calc(50% + var(--arrow-width)), blue 0 calc(50% + var(--arrow-width) * 2)) 0 calc(100% - var(--bottom-height)) / 100% var(--arrow-width), 
              linear-gradient(to bottom right, transparent 0 50%, yellow 50.1% 100%) calc(50% + (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(to bottom left, transparent 0 50%, green 50.1% 100%) calc(50% - (var(--arrow-width) / 2)) calc(100% - var(--bottom-height)) / var(--arrow-width) var(--arrow-width), 
              linear-gradient(purple, purple) 0 100%/ 100% calc(var(--bottom-height)), 
              url(https://picsum.photos/id/600/360) 50% 50% / cover;
  background-repeat: no-repeat;
}

Masking:

.a {
  /* you can change this variable */
  --arrow-width: 30px;
  
  width: 100%;
  height: 300px;
  --mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--arrow-width)) no-repeat, 
          linear-gradient(to top right, transparent 0 50%, #000 50.1% 100%) calc(50% - var(--arrow-width) / 2) 100% / var(--arrow-width) var(--arrow-width) no-repeat, 
          linear-gradient(to top left, transparent 0 50%, #000 50.1% 100%) calc(50% + var(--arrow-width) / 2) 100% / var(--arrow-width) var(--arrow-width) no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background: url(https://picsum.photos/id/600/360) 50% 50% / cover;
}