Наклон на фоне изображения с непрозрачностью

Question

Я делаю одностраничный веб-сайт для практики Flexbox и т. Д.

Для этого я использую PSD-файл, и у меня возникли некоторые проблемы.Я хочу сделать прямоугольник со скошенной верхней стороной с непрозрачностью на моем фоне, я прочитал о svg и должен ли я сделать это с этим, как на картинке:

(коричневая вещь с непрозрачностью по всему виду веб-сайта)

У меня снова похожая проблема.У меня есть картинка:

И она должна выглядеть так:

Советы будут отличными

Answer 1

Другой подход без градиента.

Создание оболочки Это может быть div с фоновым изображением.Важно, что вам нужно overflow: hidden и position: relative.

Создать прямоугольник и повернуть его Вы можете создать :before псевдоэлемент, подобный этому:

.wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  background: red;
  overflow: hidden;
}

.wrapper:before {
  content: '';
  position: absolute;
  display: block;
  background: blue;
  opacity: .5;
  bottom: -100px;
  left: -100px;
  right: -100px;
  height: 150px;
  transform: rotate(-5deg);
}

<div class="wrapper"></div>

Answer 2

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

Здесь у меня есть <div> с двумя фонами:

1. изображение
2. линейный градиент CSSповерх него.

Острый край градиента работает, потому что есть два шага градиента, которые совпадают.Это означает, что цвет градиента переходит прямо с прозрачного на 50% синего.

Я использовал синий, чтобы он хорошо отображался в этом примере.В вашем случае просто переключите его на коричневый.

div {
  width: 1240px;
  height: 648px;
  background: linear-gradient(175deg, rgba(0,0,200,0) 0%, rgba(0,0,200,0) 70%, rgba(0,0,200,0.5) 70%, rgba(0,0,200,0.5) 100%),
              url(https://i.stack.imgur.com/Rq6eR.jpg);
}

<div></div>