Вырезать изображение по диагонали с помощью CSS

Как вырезать часть изображения или контейнера по диагонали с помощью CSS?

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

Чтобы быть более конкретным: если на картинке выше изображена голубая часть, а не желтая

HTML должен быть:

<figure>
 <img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>

или же:

<div class="container">
  content
</div>

Из моего собственного расследования есть много способов сделать это, но большинство из них являются хакерскими, поэтому ищут лучший подход

Минимальная поддержка браузера: IE11, последние веб-комплекты и т.д.

Ответы

Ответ 1

Используйте CSS3 -clip-path и polygon как это. Вы можете указать любой путь, по которому хотите.

img {
  width: 100px;
  height: 100px;
  -webkit-clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
  clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
}

<img src="https://picsum.photos/id/0/100/100">

Ответ 2

Вы можете использовать pseudo element, в сочетании с overflow:hidden;

Результат

div {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
  background: url(http://placekitten.com/g/300/300);
}
div:after {
  content: "";
  position: absolute;
  top: 93%;
  left: 0;
  height: 100%;
  width: 150%;
  background: red;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

<div></div>

Ответ 3

Это немного грязно, но... Вот идея:

HTML

body {
  background: #eee;
}
figure {
  display: inline-block;
  overflow: hidden;
  padding-left: 20px;
  margin-left: -20px;
  padding-top: 50px;
  margin-top: -50px;
  padding-right: 20px;
  margin-right: -20px;
  height: 200px;
  transform: rotate(-10deg);
}
figure img {
  transform: rotate(10deg);
}

<figure>
  <img src="http://placehold.it/502x260&text=Random+Image" />
</figure>

Ответ 4

-Вы можете использовать http://cssplant.com/clip-path-generator для этого.

Это просто "грязное решение", лучший способ - разместить svg над img.

Возможно, в будущем "свойство css css" будет поддерживать другие типы фигур, чем просто "rect", и такие вещи могут быть выполнены!

Другой "грязный способ" помещает div над img, с фоном, который вы хотите, и вращайте его!

Ответ 5

Просто идея:

HTML

<figure>
    <img src="http://placehold.it/500x500" alt="">
</figure>

CSS

figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    line-height: 0;
}

figure:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    left: 0;
    bottom: -91%;
    background: red;
    -webkit-transform: rotate(355deg);
    transform: rotate(355deg);
}

Demo

Попробуйте перед покупкой

Ответ 6

body {
  background: #eee;
}
figure {
  display: inline-block;
  overflow: hidden;
  padding-left: 20px;
  margin-left: -20px;
  padding-top: 50px;
  margin-top: -50px;
  padding-right: 20px;
  margin-right: -20px;
  height: 200px;
  transform: rotate(-10deg);
}
figure img {
  transform: rotate(10deg);
}

<figure>
  <img src="http://placehold.it/502x260&text=Random+Image" />
</figure>