创建具有重复背景图像的响应式三角形

Posted 2023-03-06

【中文标题】创建具有重复背景图像的响应式三角形

【英文标题】：Creating a responsive triangle with repeating background image

【发布时间】：2015-05-14 11:41:13

【问题描述】：

我正在尝试为网站创建一个三角形，该三角形始终保持 100% 的宽度，并具有重复的背景并覆盖动态背景。很高兴使用任何方法，到目前为止已尝试将 SVG 与模式一起使用，但没有成功。

也尝试过使用borderimage进行边框，但再次失败。

我应该提到这将覆盖图像，因此三角形的一半矩形使用重复图像，另一半需要透明。

有没有人对如何做到这一点有任何想法，或者在过去有过经历吗？

编辑

示例：

这些是 3px x 3px 正方形中的 1px x 2px 黑线。

【问题讨论】：

你能想象一下你的想法吗？

嗨，jcuenod，我添加了一张图片和一个简短的描述。

一个 div 包含 4 张图片还是只有一张图片？

这将在站点范围内使用，这只是它覆盖 4 个图像的示例，在其他地方它会覆盖颜色，而在其他地方它会覆盖一个图像

【参考方案1】：

您可以使用隐藏溢出的旋转容器。 这将允许您在其他图像、渐变或任何其他非纯背景上显示这些图像：

DEMO

.wrap 
    transform-origin:0 100%;
    transform:rotate(-3deg);
    overflow:hidden;
    width:100%;
    padding-right:5%;

.images 
    transform-origin:inherit;
    transform:rotate(3deg);
    overflow:hidden;
    -webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/

img 
    float:left;
    width:24%;
    margin:0 .5%;


/** FOR THE DEMO **/
bodybackground:url('https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg');background-size:cover;overflow-x:hidden;

<div class="wrap">
    <div class="images">
        <img src="http://lorempixel.com/output/people-q-c-300-200-9.jpg"  />
        <img src="http://lorempixel.com/output/people-q-c-300-200-3.jpg"  />
        <img src="http://lorempixel.com/output/people-q-c-300-200-6.jpg"  />
        <img src="http://lorempixel.com/output/people-q-c-300-200-1.jpg" />
    </div>
</div>

【讨论】：

这是我们选择使用的解决方案，如果您有兴趣在此处查看实现：codepen.io/anon/pen/dPgmRL

【参考方案2】：

您可以为此使用伪元素来重叠您的图像：

html,
body 
  margin: 0;
  padding: 0;

div 
  width: 100vw;
  background: rgba(0, 0, 0, 0.4);
  height: 300px;
  position: relative;
  overflow: hidden;
  display: inline-block;

div:after 
  content: "";
  position: absolute;
  width: 150vw;
  height: 40vw;
  bottom: -30vw;
  left: -25vw;
  background: #222;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

<div>
  <img src="http://placekitten.com/g/200/300"  />
  <img src="http://placekitten.com/g/200/300"  />
  <img src="http://placekitten.com/g/200/300"  />
</div>

【讨论】：

伪元素的好用

【参考方案3】：

您可以使用可以接收背景图像的伪元素来做到这一点。

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;

.wrapper 
  position: relative;
  width: 80%;
  margin: 25px auto;
  padding: .25em;
  border: 1px solid grey;
  overflow: hidden;
  /* quick clearfix */

.wrapper::after 
  position: absolute;
  content: "";
  width: 150%;
  height: 50%;
  background-color: rgba(255, 0, 0, 0.5);
  bottom: 0;
  right: 0;
  transform: rotate(-5deg);
  transform-origin: top right;

.wrapper img 
  max-width: 25%;
  height: auto;
  float: left;

<div class="wrapper">
  <img src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg"  />
  <img src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg"  />
  <img src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg"  />
  <img src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg"  />
</div>

【讨论】：

阅读了这个问题（这次更彻底），OP 也希望有一个图像背景，所以看起来伪在这里不是最好的选择

为什么伪元素不能有背景图？我这里只是用一种颜色作为例子。

对不起，不是这样的，它的 OP 似乎想在这背后有一个大图（见 web-tiki 的回答）似乎