Обрезка углов изображения с помощью CSS траектории с фиксированным углом - PullRequest
Новая
       26

Обрезка углов изображения с помощью CSS траектории с фиксированным углом

0 голосов
/ 27 апреля 2020

Я хочу обрезать углы моего изображения на 45 градусов , как на изображении ниже, с clip-pat h, я хочу значения в процентах, мне просто нужны значения для пути клипа, 

#div img:first-child {
  clip-path: polygon(100% 0%, 0% 0%, 9.52% 98.91%, 89.95% 100%);
}
<div id="div">
  <img src="https://i.picsum.photos/id/10/400/300.jpg">
</div>

example image

Изображение только для примера, потому что углы не совсем 45 градусов, мне нужно, чтобы резка была сделана точно на 45 градусов, и мой код не 45 градусов

1 Ответ

0 голосов
/ 27 апреля 2020

Используйте маску вместо clip-path, и вы легко сможете получить свой 45deg 

img {
  -webkit-mask:
     linear-gradient(-135deg,#fff 50%,transparent 50%) top left ,
     linear-gradient(-225deg,#fff 50%,transparent 50%) top right;
  -webkit-mask-size:2000px 2000px; /* width = height and big enough to consider all the cases */
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite: destination-in;
  mask:
     linear-gradient(-135deg,#fff 50%,transparent 50%) top left,
     linear-gradient(-225deg,#fff 50%,transparent 50%) top right;
  mask-size:2000px 2000px; /* width = height and big enough to consider all the cases */
  mask-repeat:no-repeat;
  mask-composite: intersect;
  
  margin:5px;
}
<img src="https://i.picsum.photos/id/12/500/100.jpg" >

<img src="https://i.picsum.photos/id/10/700/100.jpg" >

<img src="https://i.picsum.photos/id/125/500/200.jpg" >

Другая идея использования clip-path, которая будет только , работает, если ширина изображения всегда будет больше его высоты: 

img {
  clip-path:polygon(0 0,100% 0,calc(100% - 2000px) 2000px,2000px 2000px);
  margin:5px;
}
<img src="https://i.picsum.photos/id/12/500/100.jpg" >

<img src="https://i.picsum.photos/id/10/700/100.jpg" >

<img src="https://i.picsum.photos/id/125/500/200.jpg" >
...