使用css渐变创建形状

Question

我们如何使用css渐变创建响应形状，如附加图像。

Answer 1

我已经添加了使用HTML和CSS执行此操作的示例。这当然只是一种方式。

＆＃13;

＆＃13;

div{
  
  height: 15px;
  
  width: 50%;
  
  background-color: black;
  
  position: absolute;
  
  top: 0;
  
}

.left{
  
  transform-origin: top right;
  transform: rotate(-5deg);
  
}

.right{
  
  left: 50%;
  
  transform-origin: top left;
  transform: rotate(5deg);
  
}

＆＃13;

<div class="left"></div>
<div class="right"></div>

＆＃13;

＆＃13;

＆＃13;