我正在尝试设计一个带有多个css颜色的标题.只有颜色

Question

我试图制作一个看起来有点像上图的标题.

我想添加不同深浅的绿色形状.(图像是在油漆中修改过的.)

我玩过我能在互联网上找到的东西并最终得到了这个:

.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>

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