CSS 图片中提到的 Div 的形状

Question

我有 2 张 CSS Div 形状的图像。我想让我的 DIV 像图片中那样。

任何帮助都会很棒。

.imageOne {
  clip-path: polygon(0 0, 100% 0%, 100% 11%, 0 0);
  height: 100px;
  background: blue;
}

.imageTwo {
  clip-path: polygon(80% 30%, 100% 41%, 100% 41%, 0 40%, 0 40%);
  height: 100px;
  background: blue;
}

<div class="imageOne">

</div>


<div class="imageTwo">

</div>

Answer 1

您可以调整如下：

.imageOne {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 40%); /* adjust the 40% here */
  height: 100px;
  background: 
    linear-gradient(to bottom left,transparent 49%,#b3e1ff 50%) 
     bottom left/200% 60% /* adjust the 200% here, 60% = 100% - 40% (from the top) */
     no-repeat
    #e1f4ff;
}

.imageTwo {
  /*                       here ----v               v---- and here the same */
  clip-path: polygon(100% 100%,100% 70%,  80% 0, 0 70%,0 100%);
  /*    adjust this to control the top ----^                                */
  height: 100px;
  background: #e1f4ff;
}

<div class="imageOne">

</div>


<div class="imageTwo">

</div>

CSS 图片中提到的 Div 的形状

CSS Shape for Div mentioned in the Image

html

css

shapes