CSS - 创建复杂的形状答案

【问题标题】：CSS - create complex shape [duplicate]CSS - 创建复杂的形状
【发布时间】：2016-08-26 16:48:27
【问题描述】：

有没有简单的方法使用 CSS 来制作这个形状？

【问题讨论】：

使用 svg 可能你想要它？？
这是一个骗子，通过简单的搜索很容易找到。先研究再问！
但另一个找到的解决方案看起来很复杂.. 对于一个 div 三个 div 样式。我有很多样式相似但仍然不同的 div，这将是很多代码......因此我正在寻找更简单的东西。

【解决方案1】：

您可以使用rotateX() 和perspective() 来创建这样的形状。

.shape {
  width: 250px;
  height: 70px;
  border: 2px solid black;
  border-top: 1px solid black;
  margin: 50px;
  transform: perspective(10px) rotateX(-2deg);
}

&lt;div class="shape"&gt;&lt;/div&gt;

【讨论】：

噢，谢谢！这很简单，而且很有效！
你是一个足够高的代表用户，拥有足够多的 CSS 支持，知道这应该是一个骗局......
顺便说一句，有没有办法限制内部 div 的规模..？我
@Lukáš Unzeitig 不确定这是否是您的意思，但您可以在父级上设置transform-style: preserve-3d;，然后在子级jsfiddle.net/Lg0wyt9u/1151 上进行反向转换

【解决方案2】：

是的，它可以做到。请看下面的代码。

.shape {
    width: 200px;
    height: 100px;
    background: #000;
    margin: 20px 150px;
    position: relative;
}

.shape:after {
        content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid #000000;
    border-bottom: 50px solid #fff;
    border-left: 50px solid #000000;
    border-right: 50px solid #fff;
    position: absolute;
    top: 0;
    right: -99px;
}

.shape:before {
        content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid #000000;
    border-bottom: 50px solid #fff;
    border-left: 50px solid #fff;
    border-right: 50px solid #000000;
    position: absolute;
    top: 0;
    left: -99px;
}

&lt;div class="shape"&gt;&lt;/div&gt;

【讨论】：