Question

我正在尝试制作非矩形背景的网站。以下是图片的外观：https://scontent-frt3-1.xx.fbcdn.net/v/t34.0-12/13046124_10208507344992928_1508021114_n.jpg?oh=4da1595b35d18dd641146a5ff5f39ff9&oe=57206A50

我在网上尝试了很多建议，但对我来说没什么用。请问有人帮我吗？谢谢！

Answer 1

您可以使用transform:skewY来创建此类设计。下面是一个快速演示，其中background属性已被使用，同时巧妙地使用background-position来定位＆＃34;两半＆＃34;一起形象：

＆＃13;

div{
  width:100%;
  height:300px;
  position:relative;
  margin-top:50px;
  }
.part1:before,.part1:after{
    content:"";
  position:absolute;
  background:url("http://www.godhungry.org/wp-content/uploads/2015/08/6794440-free-street-wallpaper.jpg");
  background-size:200% 100%;
  background-position:0 0;
  height:100%;
  width:50%;top:0;left:0;
  transform:skewY(5deg);
  transform-origin:top left;
  }
.part1:after{
  left:50%;
  transform:skewY(-5deg);
  transform-origin:top right;
  background-position:-100% 0;
  }
.part2{
  background:url("http://www.godhungry.org/wp-content/uploads/2015/08/6794440-free-street-wallpaper.jpg");
  background-size:100% 100%;
  transform: perspective(2000px) rotateY(-30deg);
transform-origin:top right;
  }

＆＃13;

<div class="part1"></div>

<div class="part2"></div>

＆＃13;

背景图像塑造

1 个答案: