1

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

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

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

在此处输入图像描述

即使有人可以帮助我找到合适的房产来使用，这样我就可以研究如何完成这将是有帮助的。

提前致谢。

4

2 回答 2

3

很难做出这个形状。您可以使用创建此形状，clip-path但恐怕此属性的支持并不出色。

在此处查看支持。

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

.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-01T14:33:00.667 回答
1

这将给出一个钻石，因此您可以调整它以获得您的形状：

#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-06T10:07:59.210 回答