用纯粹的CSS3创建一个动态形状

我非常精通CSS，但我无法为我的生活弄清楚这一点。用纯粹的CSS3创建一个动态形状

我需要在一个项目中为纯CSS（如果可能）重新创建一些形状。更难的是我需要这些形状来使用背景图像。我已经尝试了许多CSS3属性，例如歪斜，变形，旋转等等，但是迄今为止还没有工作。倾斜让我最接近但背景，它的内容偏斜。我试图在div内设置一个图像，并将其与div歪斜对齐的属性赋予相反的属性，使图像变直，但无法正确定位图像。

是否有可能在任何情况下使用CSS重新创建？

enter image description here

即使有人可以帮我找到用，所以我可以研究它会怎么做，这将是有帮助的权利属性。

在此先感谢。

来源

2013-03-06 kala233

您可以使用画布对象在HTML5或它必须是一个对象上严格CSS3？ – Tobias 2013-03-06 09:28:18

帆布可以工作，但我没有触及它很多。任何链接？谢谢。 – kala233 2013-03-06 09:35:39

难形状，使这一个。您可以使用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>

来源

2015-05-01 14:33:00 Ruddy

太棒了！谢谢！ – unbreak 2015-12-01 20:20:39

这会给一个DIAMON这样你就可以调整它让你的形状：

#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/

来源

2013-03-06 10:07:59

用纯粹的CSS3创建一个动态形状

回答

相关问题