创建对角背景图像

Question

我想创建一个对角背景图像，如附图所示。我可以使用线性渐变创建对角线，但是因为我有两个不同的角度，所以它不起作用。

Answer 1

使用线性渐变：

这可以使用多个背景图像并相应地定位它们来完成。在下面的片段中，我使用了3个不同的层 - 一个用于顶角（一个三角形，透明度为50％，其余为彩色），一个用于中间，基本上只是一个纯色矩形，这是使用线性渐变创建，因为它更容易控制图像的尺寸，最后一个用于底部角度（与顶部角度相同，但是它具有不同的高度和不同的角度。）

输出也是响应性的，您可以通过将元素悬停在下面的代码段中看到。在第二个div中，我为每个图像设置了不同的颜色，以便您可以看到它是如何形成的。

div {
  height: 300px;
  width: 100%;
  background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightblue, lightblue), linear-gradient(to top right, transparent 50%, lightblue 51%);
  background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
  background-position: top left, left 30px, bottom left;
  background-repeat: no-repeat;
  transition: all 1s ease;  /* just for demo */
}

/* just for demo */
div {
  margin-bottom: 10px;
}
div:hover {
  height: 400px;
}
div:nth-of-type(2) {
  background: linear-gradient(to bottom right, transparent 50%, lightblue 51%), linear-gradient(lightpink, lightpink), linear-gradient(to top right, transparent 50%, lightgreen 51%);
  background-size: 100% 30px, 100% calc(100% - 130px), 100% 100px;
  background-position: top left, left 30px, bottom left;
  background-repeat: no-repeat;
}

<div></div>
<div></div>

使用SVG： ^推荐

这是我通常推荐的方法，也是最好的方法。它涉及使用SVG创建形状，然后将其完全放在div元素后面。

div {
  position: relative;
  height: 300px;
  width: 100%;
}
svg {
  position: absolute;
  height: 100%;
  width: 100%;
}
polygon {
  fill: lightblue;
}

<div>
  <svg viewBox='0 0 300 100' preserveAspectRatio='none'>
    <polygon points='0,10 300,0 300,100 0,75z' />
  </svg>
</div>

使用剪辑路径：

可以使用的另一种方法是将伪元素放在主div后面，然后将所需形状的clip-path设置为此伪元素。

注意：此代码段目前仅适用于支持WebKit的浏览器。 Firefox需要通过SVG元素创建剪辑路径，而IE不支持所有剪辑路径。

div {
  position: relative;
  height: 300px;
  width: 100%;
}
div:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: lightblue;
  -webkit-clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
  clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 75%);
}

<div></div>

Answer 2

CSS Perspective

您可以使用CSS透视变换来创建所需的形状。

div {
  margin-top: 25px;
  width: 500px;
  height: 150px;
  transform: perspective( 800px ) rotateY( -25deg );
  background: blue;
}

<div></div>

• CSS Tricks Docs
• Perspective - CSS | MDN

Answer 3

您可以将perspective应用于旋转div的父容器，使其从视口前面获得三维深度。

N.B。有关transform: perspective(value)和perspective: value之间的差异，请参阅CSS Tricks Almanac entry on perspective：

  

重要提示：请注意perspective属性不会影响元素的呈现方式;它只是为孩子们提供3D空间   元素。这是transform: perspective()函数和perspective属性之间的主要区别。首先   给出元素深度，而后者创建所有人共享的3D空间   它变形的孩子。

使用perspective将3维深度应用于父容器后，您可以将rotateY应用于要旋转的div。

工作示例：

＆＃13;

＆＃13;

section {
position: relative;
width: 600px;
perspective: 800px;
transform: translateX(-60px);
}

div:nth-of-type(1) {
position: absolute;
top:30px;
left: 0;
width: 100%;
height: 100px;
background-color: rgb(235,250,255);
transform: rotateY(320deg);
}

div:nth-of-type(2) {
position: absolute;
top: 0;
left: 220px;
width: 120px;
height: 140px;
background-color: rgb(103,201,236);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}

div:nth-of-type(3) {
position: absolute;
top: 24px;
left: 340px;
width: 120px;
height: 140px;
background-color: rgb(255,255,255);
box-shadow: 6px 6px 6px rgba(127,127,127,0.5);
}

＆＃13;

<section>
<div></div>
<div></div>
<div></div>
</section>

＆＃13;

＆＃13;

＆＃13;