Необходимо обрезать угол изображения с помощью блока

Question

На фрагменте видна картинка, которая находится в блоке, у которого в свою очередь есть фон, с обрезанным углом. Мне нужно сделать так, чтобы у той самой картинки был обрезан угол, но я не могу понять, как это можно сделать. Буду очень признателен любой помощи, возможно есть вариант сделать это через js(только не jquery, пожалуйста!!!).

.forAngle {
  background: linear-gradient(-135deg, white 10px, red 0);
}

.filesView_col3 {
  text-align: center;
  margin-right: 40px;
  max-width: 150px;
  height: max-content;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 30px;
}

.filesView_col3_img{
        width: 100%;
}

.right-click-area{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    max-height: max-content;
    position: relative;
}

#myImg{
    cursor: pointer;
    transition: 0.3s;
}
#myImg:hover{
    opacity: 0.7;
}

<div class="filesView_col3">
  <div class="forAngle">
    <img class="filesView_col3_img checkSlider right-click-area" src="https://sun9-17.userapi.com/impg/w0hPmi8E7sGOq1CHJqZOsRXcDt0TLcbCBISEpg/BS1D0HUKse4.jpg?size=750x750&quality=96&proxy=1&sign=53403fd414deb33ca28531c56d86f162&type=album" id="myImg">
  </div>
  File
</div>

Answer 1

Можно использовать css-маску (синтаксис похож на background)

.forAngle {
  background: linear-gradient(-135deg, white 10px, red 0);
}

.filesView_col3 {
  text-align: center;
  margin-right: 40px;
  max-width: 150px;
  height: max-content;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 30px;
}

.filesView_col3_img{
        width: 100%;
}

.right-click-area{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    max-height: max-content;
    position: relative;
    -webkit-mask: linear-gradient(-135deg, transparent 10px, black 0);
}

#myImg{
    cursor: pointer;
    transition: 0.3s;
}
#myImg:hover{
    opacity: 0.7;
}

<div class="filesView_col3">
  <div class="forAngle">
    <img class="filesView_col3_img checkSlider right-click-area" src="https://sun9-17.userapi.com/impg/w0hPmi8E7sGOq1CHJqZOsRXcDt0TLcbCBISEpg/BS1D0HUKse4.jpg?size=750x750&quality=96&proxy=1&sign=53403fd414deb33ca28531c56d86f162&type=album" id="myImg">
  </div>
  File
</div>

БЛОГ НА HUSL

Необходимо обрезать угол изображения с помощью блока

Ответы (1 шт):