html - 我正在尝试设计一个带有多种 css 颜色的标题。仅从颜色

Question

我正在尝试制作一个看起来有点像上图的标题。

我想添加不同深浅的绿色形状。 (图像是在 paint 中修改的。)

我尝试了网上能找到的东西，结果是这样的:

.container 
    position: relative
    width: 100%
    min-height: 100vh
    margin: 0 auto
    overflow: hidden
    background-color: green
    &::after 
        content: ''
        position: absolute
        background-color: #6fbc29
        padding-bottom: 124.42136%
        width: 100%
        bottom: 0
        left: 0
        transform: rotate(80deg) 
        transform-origin: left bottom

https://codepen.io/anon/pen/rGXQaw

我不想添加图像作为背景。我不知道如何向这段代码添加更多形状。我应该尝试用另一种方法来编写它吗？

有人可以帮忙吗？

Answer 1

如你所见，你有 4 种颜色，所以我们可以这样做:

1) 第一种颜色是容器的背景

2) 第二种颜色可以是容器的边框颜色

3) 第三个使用 :before 元素

4) 第四个使用 :after 元素

诀窍是使用一些倾斜和旋转转换

body {
  overflow: hidden;
}

.container {
  background: red;
  height: 100px;
  border-left: 65px solid blue;
  transform: skew(30deg);
  overflow: hidden;
  width: 110%;
  position: relative;
  left: -40px;
}

.container:before {
  content: " ";
  position: absolute;
  background: pink;
  width: 500px;
  height: 100px;
  left: -180px;
  transform: skew(60deg);
}

.container:after {
  content: " ";
  background: green;
  width: 180px;
  height: 180px;
  position: absolute;
  bottom: -126px;
  left: 200px;
  transform: rotate(30deg) skew(-10deg);
}

<div class="container"></div>

然后您可以根据需要调整值和颜色。