html - 流体宽度 SVG 形状上的重复图案?

标签 html css svg background css-shapes

我正在尝试在 HTML/CSS 中重新创建此布局(跨浏览器兼容回 IE9):

diagonally split background pattern

基本上,它是一条跨越视口(viewport)宽度的对 Angular 线,将两个背景图案分开。它将具有固定的高度,但它应该动态拉伸(stretch)到其容器的整个宽度。

我想不出使用纯 CSS 实现此目的的方法,所以我的下一个想法是使用 SVG。这对纯色来说并不难:

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

但是,我对如何将重复背景图案应用到 SVG 形状感到困惑。它需要与 <section> 中的背景图案对齐s 上下,并且背景填充不应随形状的尺寸缩放,否则会显得扭曲。

在 CSS 中应用一些背景图片,我越来越接近了:

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

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

使用更明显的图像作为测试,我能够将其拉伸(stretch)到我的 <polyline> 的尺寸:

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

但是,有些拉伸(stretch)是我不想要的。我需要平铺我的图案,或者至少不扭曲它的原始尺寸(这样我可以在需要时使用它的大样本),即使形状本身具有流动宽度。我为 <pattern> 尝试了几种不同的属性值组合元素,但我还没有找到任何按预期工作的东西,即使遵循相关答案的一些指导也是如此:

有什么建议吗?我也很想听听有关非 SVG 方法的任何想法。谢谢!


更新:

抱歉,我刚刚意识到我的 CodePen 示例中的背景模式不起作用。我已经使用有效的图片 URL 更新了它们。

最佳答案

考虑到你需要:

  • 相对于视口(viewport)的倾斜宽度
  • 形状的固定高度

有一种简单的 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>

该图案使用背景图像属性重复。倾斜是用伪元素上的边框制作的。
父 div 的边框只是为了在倾斜周围形成顶部和底部空间。

视口(viewport)相关单位 (vw) 受 IE9 及以上版本支持(有关详细信息,请参阅 canIuse)。


更新:

如果您需要为两个区域设置单独的背景图像,则有 2 种可能的 CSS 方法:

带转换: 受 IE9 及以上 vendor prefixes 支持.倾斜始终具有相同的 Angular 。

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 ,它可以让你更好地控制倾斜 Angular :

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>

关于html - 流体宽度 SVG 形状上的重复图案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34715926/

相关文章:

css - H1 上的 width=100% 导致 body Canvas 上有额外的 margin-right ...?

css - WordPress 标志编辑

html - 圆形动画不适用于 SVG

javascript - 如何使用 d3 更新/覆盖 map 和图例内容

html - 定位嵌套列表

javascript - JQuery忽略表单元素

html - 辅助功能:将焦点从按钮转移到嵌套范围——好主意吗?

javascript - 让 JavaScript 创建一个完整的 li

css - 如何将标题从另一个标题移动 50px?

css - SVG 和 CSS 用于渐变的浏览器资源量有什么不同吗?