Как правильно скрыть часть изображения?

#html #css #css3 #svg #inkscape

Имеется изображение в формате , как скрыть обрезать угол изображения?

А если изображение будете задано в качестве bg фона?


    

Ответы

Ответ 1

Решение SVG

С помощью техники,- использование mask svg,  можно сделать очень сложные вырезы,
которые трудно повторить в css 

Для этого понадобится минимальные навыки работы в векторном редакторе. 


Загружаем нужную картинку в векторный редактор (Inkscape) и рисуем path который будет
служить границей вырезанной части.   

     
Рисуем кривую с помощью инструмента -


Далее в меню Inkscape выбираем Контур / оконтурить
обводку   
Сохраняем файл SVG и в любом текстовом редакторе копируем из файла формулу кривой





Вот эта кривая линия и будет границей вырезания части изображения.  

Ниже код с маской:   





    



Ответ 2

Вам может подойти свойство mask-image

Пример: http://jsfiddle.net/fbB3P/254/

Документация: https://developer.mozilla.org/ru/docs/Web/CSS/mask-image

Поддержка    браузерами: https://caniuse.com/#search=mask-image


Ответ 3

body {
  background: linear-gradient(to right, blue, red);
  padding: 0 20%;
}

section, div {
  overflow: hidden;
}

div {
  padding-top: 100%;
  margin-top: -100%;
  transform: skew(0deg, -10deg);
}

img {
  display: block;
  max-width: 100%;
  transform: skew(0deg, 10deg);
}

  

    
  



Ответ 4

Я бы пошел путем наименьшего сопротивления и просто отредактировал изображение с
созданием прозрачного слоя.(Тут нужно отказаться от формата jpg)


Ответ 5

Если правильно вас понял. То в этом случае, лучше img обернуть в div и div-блоку
задать размеры width и height меньшие, чем у img и добавить свойство для div overflow:
hidden. Например:
Размеры img (width: 300px, height: 300px)
Делаем:


  



Изображение обрежется на 50px справа и снизу.

Для фона тоже самое.