使用纯 CSS3 创建动态形状答案

【问题标题】：Creating a dynamic shape with pure CSS3使用纯 CSS3 创建动态形状
【发布时间】：2013-03-06 09:26:20
【问题描述】：

我非常精通 CSS，但我终其一生都无法弄清楚这一点。

我需要用纯 CSS（如果可能的话）为一个项目重新创建一些形状。更难的是我需要形状来使用背景图像。我已经尝试了许多 CSS3 属性，例如倾斜、变换、旋转等……但是到目前为止还没有任何效果。偏斜让我最接近，但背景及其内容偏斜。我尝试在 div 内设置一个图像，并赋予它与 div skew 相反的属性，从而拉直图像，但后来我无法正确定位图像。

是否有可能使用 CSS 重新创建它？

即使有人可以帮助我找到合适的属性来使用，以便我研究如何完成它会有所帮助。

提前致谢。

【问题讨论】：

你能在 html5 中使用 canvas 对象还是必须在对象上严格使用 CSS3？
Canvas 可以工作，不过我还没有接触太多。有链接吗？谢谢。

标签： html css transform css-shapes

【解决方案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;
}

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

【讨论】：

【解决方案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/

【讨论】：