Created a svg polygon triangle, now the question arose how to align it correctly in the center of the image?

img { max-width: 100%; clip-path: url(#clipping); } 
 <img src="https://image.freepik.com/free-photo/shiny-night-city_1127-8.jpg" alt=""> <svg> <defs> <clipPath id="clipping"> <polygon points="0 0,300 0,150 300"> </polygon> </clipPath> </defs> </svg>

At the output we get the following: image

Ideally, set in% the position of the triangle relative to the image, for example, in the center - 50% 50%.

  • As I understand, to make an image as a background is not an option? - Alexey
  • Do you mean, initially prepare a triangular image? No, not an option ... - Mike_Ro
  • No, I mean to make a picture as a background, and not through the img tag. - Alexey
  • In principle, it is possible and as a background. So you can then position the 'triangle'? If so, how? - Mike_Ro

1 answer 1

As an option, make it through the background and already customize the background-position и background-size

 .img { max-width: 100%; clip-path: url(#clipping); min-height:417px; background-image: url(https://image.freepik.com/free-photo/shiny-night-city_1127-8.jpg); background-size:80%; background-repeat: no-repeat; } 
 <div class="img"> </div> <svg> <defs> <clipPath id="clipping"> <polygon points="0 0,300 0,150 300"> </polygon> </clipPath> </defs> </svg>

  • As an option, suitable! Thank! - Mike_Ro