使用剪辑路径的复杂形状

Question

我正在剪辑路径，但这件事对我来说似乎并不容易。实际上我需要使用clip-path测试自定义形状。我附上了我想要的图片。

到目前为止我已经这样做了，但这似乎并不像我想要的那样。任何想法如何使用多边形剪辑路径获得确切的形状？

＆＃13;

＆＃13;

.margin-0 {
    margin:0
  }
  .padding-0 {
     padding:0 
    }
    
    .clip1 {
        clip-path: polygon(0 0, 0% 100%, 100% 0);

      }
  .clip2 {
        clip-path: polygon(1% 50%, 100% 100%, 100% 0);
      }
      

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container-fluid padding-0">
    <div class="row padding-0">
        <div class="col-md-12 clip1" style="background-color:#ff0000;color:#fff">CLIP 1<br>CLIP 1<br>CLIP 1<br>CLIP 1<br>CLIP 1<br>CLIP 1<br>CLIP 1<br>CLIP 1<br>CLIP 1<br>CLIP 1<br>CLIP 1</div>
    </div>
    <div class="row padding-0">
        <div class="col-md-12 clip2" style="background-color:#262626;color:#fff">CLIP 2<br>CLIP 2<br>CLIP 2<br>CLIP 2<br>CLIP 2<br>CLIP 2<br>CLIP 2<br>CLIP 2<br>CLIP 2<br>CLIP 2<br>CLIP 2</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这就是我需要的。

Answer 1

这是一种简单的方法，不需要clip-path和复杂的代码。您只需要一个元素和多个背景：

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(to bottom right,red 49%,transparent 50%) top/100% 30%,
    linear-gradient(to top right,blue 49%,transparent 50%) bottom left/120% 40%,
    green;
  background-repeat:no-repeat;
}