.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;
}

<div class="a"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Does anybody tell me what changes need to be done here if I want a triangle at the top not bottom?

CodePudding user response：

Basically you need to change the positions of the various gradients.

The first one's vertical position should start at the "arrow width" var.

Both the others vertical positions should be set to 0 instead of 100%.

You also need to change the direction of the last two gradients from "to top" to "to bottom" so the arrow will be pointing up.

Lastly, you should also add "padding-top" with the height of the "arrow width" var as to not lose that much of the image size.

.a {
  /* you can change this variable */
  --arrow-width: 30px;
  padding-top: var(--arrow-width);
  width: 100%;
  height: 300px;
  --mask: linear-gradient(#000, #000) 0 var(--arrow-width)/100% calc(100% - var(--arrow-width)) no-repeat, 
          linear-gradient(to bottom right, transparent 0 50%, #000 50.1% 100%) calc(50% - var(--arrow-width) / 2) 0 / var(--arrow-width) var(--arrow-width) no-repeat, 
          linear-gradient(to bottom left, transparent 0 50%, #000 50.1% 100%) calc(50%   var(--arrow-width) / 2) 0 / 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;
}

<div class="a"></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>