对角背景结构[CSS] [英] Diagonal Background Structure [CSS]

问题描述

当前正在为客户设计一个Web设计项目，在该项目中我设计了多层对角线背景.我用;

Currently working on a web design project for a client where I designed a multi-layered diagonal background. I solved a single diagonal with;

background-color: #dbebde;
background-image: -webkit-linear-gradient(120deg, #dbebde 50%, #f8f8f8 45%);
min-height: 400px;

但是，如下图所示，我需要在左侧添加一个较小的对角线.
有谁知道如何解决这个特定问题?

However, as seen in the image below, I need to add a smaller diagonal on the left side.
Does anyone have an idea on how to solve this specific issue?

推荐答案

您可以使用单个HTML元素(例如<div>)并使用

You can use a single HTML element, let's say a <div>, and use pseudo-elements, particularly ::before and ::after, to create those shapes, without writing additional HTML elements.

您将首先绘制红色:

body {
  margin: 0;
}

.fullBox {
  position: relative;
  height: 100vh;
}

.diagonalBox {
  background: #FFF;
  overflow: hidden;
}

.diagonalBox::before, 
.diagonalBox::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
}

.diagonalBox::before {
  background: #D00;
  top: 10%;
  transform: rotate(30deg);
  transform-origin: top left;
}

<div class="fullBox diagonalBox"></div>

然后在其上添加浅薄荷绿色:

And then add the light mint green one on top of that:

body {
  margin: 0;
}

.fullBox {
  position: relative;
  height: 100vh;
}

.diagonalBox {
  background: #FFF;
  overflow: hidden;
}

.diagonalBox::before, 
.diagonalBox::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
}

.diagonalBox::before {
  background: #D00;
  top: 10%;
  transform: rotate(30deg);
  transform-origin: top left;
}

.diagonalBox::after {
  background: #DFD;
  top: 100%;
  transform: rotate(-30deg);
  transform-origin: bottom left;
}

<div class="fullBox diagonalBox"></div>

请记住，您可能需要调整伪元素的尺寸和位置.

Keep in mind that your may need to adjust the dimensions and positions of the pseudo-elements.

这篇关于对角背景结构[CSS]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！