0

Создал svg polygon треугольник, теперь встал вопрос, как правильно его выровнять по центру изображения?

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>

На выходе получаем следующее: image

В идеале, задавать в % положение треугольника, относительно изображения, например по центру - 50% 50%.

4
  • Как я понимаю, в качестве background сделать изображение - не вариант ? 13 фев 2018 в 12:58
  • Вы имеете ввиду, изначально подготовить треугольное изображение? Нет, не вариант... 13 фев 2018 в 13:04
  • Нет, я имею ввиду сделать картинку как фон, а не через тэг img. 13 фев 2018 в 13:09
  • В принципе, можно и как фон. Так можно будет тогда позиционировать 'треугольник'? Если да, то как? 13 фев 2018 в 13:13

1 ответ 1

1

Как вариант сделать через фон и уже настраивать под себя 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>

1
  • Как вариант, подходит! Спасибо! 13 фев 2018 в 13:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.