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

by


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);
  margin-top: calc(var(--arrow-width) * -1); /* added to make the image aligned to the top */
  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>

6

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