创建对角线背景图像

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>

使用Clip-path:

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

注意：此代码段目前仅适用于支持 WebKit 的浏览器。 Firefox 需要通过 SVG 元素创建 clip-path，而 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透视

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

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

<div></div>

Answer 3

您可以将 perspective 应用到旋转后 div 的父容器，以从视口的前面为其赋予 3 维深度。

N.B.transform: perspective(value)和perspective: value的区别见CSS Tricks Almanac entry on perspective:

Important: Please note the perspective property doesn't affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the latter creates a 3D-space shared by all its transformed children.

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

工作示例：

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);
}

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

创建对角线背景图像

Create a diagonal background image

html

css

css-shapes

CSS透视