Как поставить перекос наложения на видео

Question

Я пытаюсь создать наклонное наложение видео, которое воспроизводится в фоновом режиме с полной шириной.

В настоящее время перекос наложения работает отлично, но что, если я хочу, чтобы он находился в правом нижнем углу вместо верхнего левого угла? Нужно ли менять степень перекоса?

Вот мой код:

html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url('//demosthenes.info/assets/images/container.jpg') no-repeat;
  background-size: cover;
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

h1 {
  font-size: 2.5rem;
  padding: 5% 0 0 12%;
  letter-spacing: .1rem;
}

#container {
  height: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.overlay {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.skew-overlay {
  z-index: 99;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -400px;
  width: 600px;
  background: #fff;
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 700px;
  padding: 0 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.text {
  font-size: 1rem;
  font-weight: 400;
}

<video poster=".jpg" id="bgvid" playsinline autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

<div id="container">
  <div class="overlay">
    <div class="skew-overlay"></div>
    <div class="content">
      <span class="text">Wise busy past both park when an ye no. Nay likely her length sooner thrown sex lively income. The expense windows adapted sir. Wrong widen drawn ample eat off doors money. Offending belonging promotion provision an be oh consulted ourselves it. Blessing welcomed ladyship she met humoured sir breeding her. Six curiosity day assurance bed necessary. </br>Unpacked now declared put you confined daughter improved. Celebrated imprudence few interested especially reasonable off one. Wonder bed elinor family secure met. It want gave west into high no in. Depend repair met before man admire see and. An he observe be it covered delight hastily message. Margaret no ladyship endeavor ye to settling. </span>
    </div>
  </div>
</div>

Вот рабочая скрипка - Скрипка

Answer 1

Из ваших комментариев на вопрос:

Я хочу, чтобы наложение было таким же, как в верхнем левом углу, но в правом нижнем углу

В этом случае просто измените свойство left в CSS с .skew-overlay с -400px на 400px:

.skew-overlay {
  left: 400px;
  /* other rules here... */
}

html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url('//demosthenes.info/assets/images/container.jpg') no-repeat;
  background-size: cover;
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

h1 {
  font-size: 2.5rem;
  padding: 5% 0 0 12%;
  letter-spacing: .1rem;
}

#container {
  height: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.overlay {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.skew-overlay {
  z-index: 99;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 400px;
  width: 600px;
  background: #fff;
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 700px;
  padding: 0 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.text {
  font-size: 1rem;
  font-weight: 400;
}

<video poster=".jpg" id="bgvid" playsinline autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

<div id="container">
  <div class="overlay">
    <div class="skew-overlay"></div>
    <div class="content">
      <span class="text">Wise busy past both park when an ye no. Nay likely her length sooner thrown sex lively income. The expense windows adapted sir. Wrong widen drawn ample eat off doors money. Offending belonging promotion provision an be oh consulted ourselves it. Blessing welcomed ladyship she met humoured sir breeding her. Six curiosity day assurance bed necessary. </br>Unpacked now declared put you confined daughter improved. Celebrated imprudence few interested especially reasonable off one. Wonder bed elinor family secure met. It want gave west into high no in. Depend repair met before man admire see and. An he observe be it covered delight hastily message. Margaret no ladyship endeavor ye to settling. </span>
    </div>
  </div>
</div>

Answer 2

Я решаю внести это изменение в вашу скрипку:

.skew-overlay {
  z-index: 99;
  position: absolute;
  bottom: 0;
  right: -200px;
  width: 200px;
  height: 200px;
  background: #ff0;
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}