html - Html / CSS：图像斜切屏幕的一半

Question

我想创建一个带有大图像的网页，像这样斜切屏幕：this

我看到这篇文章Html/CSS：图像占据屏幕的一半，但我不知道如何让它“斜线”屏幕。谢谢 ！

标签： htmlcss

Answer 1

您可以添加skew变换方法以使其倾斜。您可以根据自己的喜好使用值。

* {
  padding: 0;
  margin: 0;
}

body{
  overflow: hidden;
}

.slash {
  width: 50vw;
  height: 100vh;
  background-color: black;
  transform: skew(-30deg) scale(2);
  position: absolute;
  left:-20vw;
}

<div class="slash"></div>