Question

我正在尝试使用以下形状制作div，但没有成功这就是我所做的 Fiddle

到目前为止，这是代码。

.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;
}

欢迎任何解决方案

Answer 1

一种基本的未经测试的方法（如果我理解你的想法）：

HTML：

<div class="skew-container">
    <div class="img-container"></div>
</div>

CSS：

.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%; }

JS：

现在有了JavaScript，你可以做很多事情。但是我不确定你是否想要移动这两个图像中的一个。看看我的小骰子游戏。你愿意去兔洞多远？ http://jsfiddle.net/tive/GcDAb/

示例中显示的方法是包含所有骰子值和颜色的大图像。使用background-position来移动图像是数学的，就像一个矩阵一样。一点点浏览器不一致但仍然可行。

Answer 2

你需要使用3D＆amp;测试中的观点：

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

在伪的帮助下，您可以执行以下操作：http://jsfiddle.net/FCVa7/3/

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

但是最好是看看SVG制作你的形状，然后你可以从样式表中设置样式

制作一个自定义形状的div css html

2 个答案: