Javascript 制作自定义形状的div css html

我正试图用下面的形状做一个div，但没有成功 .这是我所做的

这是到目前为止的代码

.skew {
    display: inline-block;
    background-color:black;    
    height: 120px;
    width: 360px;
    margin-top: 100px;
    -webkit-transform: skewY(-11deg);
    -moz-transform: skewY(-11deg);
    -ms-transform: skewY(-11deg);
    -o-transform: skewY(-11deg);
    transform: skewY(-11deg);
    overflow:hidden;
}

---

如果我正确理解了您的想法，任何解决方案都是受欢迎的

一种基本的未经测试的方法：

HTML:

JS:

现在对于JavaScript，您可以做很多事情。 但是我不确定你是否想移动这两张图片中的一张。 看看我的小骰子游戏。你愿意到兔子洞下面多远？

示例中显示的方法是一个包含所有骰子值和颜色的大图像。

---

移动图像是数学的，就像矩阵一样，使用背景位置来移动CSS。浏览器有点不一致，但仍然可行。

您需要在测试中使用3D和透视：

body {
    transform-style: preserve-3d;
    perspective:50px;
}

在伪用户的帮助下，您可以执行以下操作：

需要根据您的需要进行调整

---

但是最好的办法是看SVG来制作你的形状，然后你可以从样式表中设置它们的样式。照片就在小提琴里，因为现在还不允许我发布照片。听起来像是个问题。这不能用css或html完成吗？我不介意用这些照片作为背景，如果我放一张照片，我只想涵盖标记部分。有什么帮助吗？嗯，等等。。。你为什么要在CSS中尝试它？这里的最终目标是什么？掩盖什么？为了更好地理解整个图片，我将上传一张图片，我只想显示其中的一部分。我想显示的部分具有小提琴中的形状。因此，我将把图片放在div中，并只显示我想要的部分。最后，我只需要div形状。这也是我为什么要将其放入div的原因溢出：hiddennot正是我想要的。问题是图像必须只覆盖所有标记区域。你知道吗？你是说一台鞋电视吗？创建一个png，给它一个背景色，在里面画你的鞋子，使它透明。不需要这样的JS。标记区域是鞋的中间部分。这不是整只鞋，这就是为什么我需要一个具有该形状的div

.skew-container { overflow: hidden; background: url(/images/skew.png) no-repeat scroll 0 0 transparent; height: 175px; width: 484px; }
.img-container { height: 100%; width: 100%; }
.img-container img { width: 100%; }

body {
    transform-style: preserve-3d;
    perspective:50px;
}