使用 CSS 渐变创建形状答案

【问题标题】：Creating shapes with css gradient使用 CSS 渐变创建形状
【发布时间】：2017-02-21 09:58:41
【问题描述】：

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

【问题讨论】：

我不知道渐变，但是您可以使用 css 使用边框属性并在其后传递 4 个参数来创建形状。
例如下面的css：border-style: solid; border-width: 176px 176px 0 176px; border-color: #1e2e42 transparent transparent transparent;会给出一个三角形
为什么不使用 SVG？在 CSS 中，转换两个 divs 或尝试使用两个 CSS triangles 可能是最简单的，就像 @xhulio 提到的那样。

【解决方案1】：

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

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

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

【讨论】：