使用剪辑路径的复杂形状答案

【问题标题】：Complex shapes using clip-path使用剪辑路径的复杂形状
【发布时间】：2018-09-01 18:12:24
【问题描述】：

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

到目前为止，我已经这样做了，但这似乎与我想要的不太接近。知道如何使用多边形剪辑路径获得确切的形状吗？

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

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

这就是我需要的。

【问题讨论】：

css-tricks.com/almanac/properties/c/clip - 参考这个。我认为这应该会有所帮助...

标签： css svg clip

【解决方案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;
}

【讨论】：