Question

我尝试在HTML / CSS中重新创建此布局（跨浏览器兼容回IE9）：

基本上，它是一条跨越视口宽度的对角线，它划分了两个背景图案。它将具有固定的高度，但它应该动态地伸展到其容器的整个宽度。

我无法想到使用纯CSS实现此目的的方法，所以我的下一个想法是使用SVG。这对于纯色来说并不是很难：

http://codepen.io/troywarr/pen/EPXVRV?editors=110

但是，我对如何将重复背景图案应用于SVG形状感到困惑。它需要与上方和下方的<section> s中的背景图案对齐，背景填充不应该与形状的尺寸一致，否则会出现扭曲。

在CSS中应用一些背景图片，我越来越近了：

http://codepen.io/troywarr/pen/OMgyoE?editors=110

我只需要在SVG的填充部分中使用深色背景图案。

使用更加可见的图片作为测试，我可以将其拉伸到<polyline>的尺寸：

http://codepen.io/troywarr/pen/BjZoEq?editors=110

但是，那是我不想要的延伸。我需要平铺我的图案，或者至少不扭曲其原生尺寸（因此我可以使用它的大样本，如果需要的话），即使形状本身具有流体宽度。我已经为<pattern>元素尝试了几种不同的属性值组合，但我还没有找到任何符合预期效果的内容，即使遵循相关答案的一些指导：

有什么建议吗？我也喜欢听到非SVG方法的任何想法。谢谢！

更新

抱歉，我刚才意识到我的CodePen示例中的背景模式并不起作用。我已使用工作图片网址对其进行了更新。

Answer 1

这是使用CSS完成它的一种方法。你可以使用after伪元素来帮助你获得这些角度，只需要一个png用于对角线（或者如果你想避开元素就旋转一个元素），另一个用于重复模式。由于我没有你的图像，我只是快速做了一些，但这应该或多或少是你想要的。

html { height:100%; }
body {
  padding:0;
  margin:0;
  height:100%;
  background:#333;
}

.demo {
  width:100%;
  height:auto;
  position:absolute;
}

body:after {
  position:absolute;
  content:'';
  top:0;
  bottom:0;
  right:0;
  left:0;
  pointer-events:none;
  background: transparent url(http://i.imgur.com/iUhGezx.png) repeat top left;
}

.demo .top {
  min-height:100px;
  background:#FFF;
  position:relative;
}

.demo .bottom { min-height:60px; }

.demo .top:after {
  position:absolute;
  content:'';
  top:100%;
  left:0;
  right:0;
  height:100px;
  background: transparent url(http://i.imgur.com/iEubBd5.png) repeat top left;  
  background-size: 100% 100px;
}

<div class="demo">
   <div class="top"></div>
   <div class="bottom"></div>
</div>

Answer 2

考虑到你需要：

倾斜宽度相对于视口
形状的固定高度

您可以使用简单的CSS方法使用border和viewport units：

body,html{padding:0;margin:0;}
div{
  border-bottom:50px solid rgba(0,0,0,.8);
  border-top: 50px solid transparent;
  background-image:url('http://i.imgur.com/iUhGezx.png');
}
div:before{
  content:'';
  display:block;
  border-right:100vw solid rgba(0,0,0,.8);
  border-top:50px solid transparent;
}

<div></div>

使用background-image属性重复该模式。倾斜是由伪元素上的边框构成的父div上的边框只是为了在倾斜周围形成顶部和底部空间。

IE9及以上版本支持视口相关单元（vw）（有关详细信息，请参阅canIuse）。

更新：

如果您需要为这两个区域分别设置背景图像，则有两种可能的CSS方法：

使用转换：支持IE9及以上vendor prefixes。倾斜总是具有相同的角度。

body,
html {
  padding: 0;
  margin: 0;
  overflow:hideden;
}
div{
  width:100%;height:150px;  
  position:absolute;
}
.top {
  padding-top:50px;
  background: #fff url('http://i.imgur.com/dzFT6wB.png');
}
.bot {
  transform-origin:100% 0;
  transform:rotate(-5deg);
  overflow:hidden;
  top:50px; right:0;
  width:110%;
}
.bot:after{
  content:'';
  position:absolute;
  right:0;top:0;
  width:100%;height:100%;
  transform-origin:inherit;
  transform:rotate(5deg) translatez(0px);
  background: #262729 url('http://i.imgur.com/LxTJ685.png');
}

<div class="top"></div>
<div class="bot"></div>

使用clip-path property：虽然它有low browser support，但它可以让您更好地控制倾斜角度：

body,html{padding:0;margin:0;}
div{
  position:relative;
  height:150px;
}
div:before, div:after{
  content:'';
  width:100%; height:100%;
  position:absolute;
}
div:before{
  background: url('http://i.imgur.com/dzFT6wB.png');
}
div:after{
  -webkit-clip-path:polygon(0% 60%, 100% 40%, 100% 100%, 0% 100%);
          clip-path:polygon(0% 60%, 100% 40%, 100% 100%, 0% 100%);
  background:#262729 url('http://i.imgur.com/LxTJ685.png');
}

<div></div>

Answer 3

SVG目前无法实现这一目标。如果使用preserveAspectRatio="none"扩展SVG，则SVG的全部内容都会受到影响。某些内容无法选择退出拉伸变换。

将来可能有办法在SVG2中执行此操作，但不能使用当前版本的SVG。

<强>更新

如果您可以使用它而不在IE中工作，您可以使用蒙版或剪辑路径来实现您想要的效果。以下是使用clip-path。

的示例

body {
  margin: 0;
}

section {
  height: 50px;
}

main {
  background-image: url('http://mass-relevance-all-access.massrel.io/template-static-2e84fe3d1c7dc87710f58b990263ad6c29dacafc/img/bg-pattern-light.png');
}

.dark {
  background: #262729 url('http://mass-relevance-all-access.massrel.io/template-static-2e84fe3d1c7dc87710f58b990263ad6c29dacafc/img/bg-pattern-dark.png');
}

.diagonal {
  background: url(http://www.boogdesign.com/examples/svg/daisy-grass-repeating-background.jpg);
  -webkit-clip-path: url(#diagonalclip);
  clip-path: url(#diagonalclip);
}

<svg width="0" height="0">
  <defs>
    <clipPath id="diagonalclip" clipPathUnits="objectBoundingBox">
      <polyline points="0,1 1,0 1,1 0,1"/>
    </clipPath>
  </defs>
</svg>
<main>
  <section class="light"></section>
  <section class="diagonal"></section>
  <section class="dark"></section>
</main>

在流体宽度SVG形状上重复模式？

3 个答案: