使用纯CSS3创建动态形状

Question

我非常精通CSS，但我不能为我的生活做好准备。

我需要在纯CSS（如果可能）中为项目重新创建多个形状。更难的是我需要使用形状来使用背景图像。我已经尝试过很多CSS3属性，比如倾斜，变换，旋转......但是到目前为止还没有任何工作。歪斜让我最接近，但背景和它的内容偏斜了。我尝试在div中设置一个图像，并赋予它与div偏斜相反的属性，使图像变直，但是我无法正确定位图像。

无论如何都可以使用CSS重新创建它吗？

即使有人可以帮我找到合适的财产，我也可以研究一下如何做有用的事情。

提前致谢。

Answer 1

难以形成这一个。您可以使用clip-path创建此形状，但我担心此属性的支持并不令人惊讶。

请参阅支持here。

现在这里是一个带背景的形状的例子。

.shape {
  width: 400px;
  height: 400px;
  background: #000;
  -webkit-clip-path: polygon(24% 0, 100% 20%, 100% 100%, 0 40%);
  clip-path: polygon(24% 0, 95% 20%, 100% 100%, 0 40%);
  background-image: url(http://p1.pichost.me/640/39/1629941.jpg);
  background-size: cover;
}

<div class="shape"></div>

Answer 2

这将给出一颗钻石，这样你就可以调整它以获得你的形状：

#diamond-narrow {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 70px solid red;
    position: relative;
    top: -50px;
}
#diamond-narrow:after {
    content: '';
    position: absolute;
    left: -50px; top: 70px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid red;
}

http://css-tricks.com/examples/ShapesOfCSS/