6

我正在尝试将页面拆分为不同的形状，如下图所示： 所需的形状

问题是我正在尝试将 div 创建为图像中的形状，以便我可以将内容放入其中，并通过更改 css 样式更改它们的颜色并使用 JavaScript 赋予它们效果，在网上搜索我确实遇到了一些网站，如CSS创建 CSS 三角形的技巧，但这并不是我想要的，因为我不能将内容放在这样的 div 中，也不能得到我需要的形状，我想也许我可以用元素得到这样的结果，但我真的不是知道使用它是否合乎逻辑并且可以获得我想要的效果吗？

有没有办法将 Html 页面划分为任何所需的形状？

4

2 回答 2

2

嗯，您可以使用 css3 转换（旋转）：

HTML：

<div class="shape1">
    <div class="shape1-content"> ... </div>
</div>

CSS：

.shape1 {
    -webkit-transform: rotate(45deg);
}
.shape1-content {
    -webkit-transform: rotate(-45deg);
}

当然，您应该应用其他样式（位置：绝对等）。

更新：

复制'n'粘贴此代码以查看实时示例：

<html>
    <head>
        <style>
            .wrapper {
                border: 1px solid #ff8888;
                height: 480px;
                left: 50%;
                margin: -240px 0 0 -320px;
                overflow: hidden;
                position: absolute;
                top: 50%;
                width:  640px;
            }
            .shape1 {
                -webkit-transform: rotate(15deg);
                   -moz-transform: rotate(15deg);

                background-color: #fff;
                border: 1px solid black;
                height: 50%;
                left: -25%;
                position: absolute;
                top: 70%;
                width: 150%;
            }
            .shape1-content {
                -webkit-transform: rotate(-15deg);
                   -moz-transform: rotate(-15deg);

                padding-left: 230px;
            }
            .shape2 {
                -webkit-transform: rotate(15deg);
                   -moz-transform: rotate(15deg);

                background-color: #fff;
                border: 1px solid #88ff88;
                bottom: 244px;
                height: 100%;
                position: absolute;
                right: 50%;
                width: 100%;
            }
            .shape2-content {
                -webkit-transform: rotate(-15deg);
                   -moz-transform: rotate(-15deg);

                bottom: 10px;
                position: absolute;
                right: 10px;
            }
            .shape3 {
                -webkit-transform: rotate(30deg);
                   -moz-transform: rotate(30deg);

                border: 1px solid #8888ff;
                bottom: 40%;
                height: 100%;
                position: absolute;
                right: 20%;
                width: 100%;
            }
            .shape3-content {
                -webkit-transform: rotate(-30deg);
                   -moz-transform: rotate(-30deg);

                   bottom: 50%;
                   position: absolute;
                   right: 10px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="shape3">
                    <div class="shape3-content">Hi there!</div>
            </div>
            <div class="shape1">
                <div class="shape1-content">Hi there!</div>
            </div>
            <div class="shape2">
                <div class="shape2-content">Hi there!</div>
            </div>
        </div>
    </body>
</html>
于 2012-12-01T23:16:49.733 回答
2

一般来说，你不能用 CSS 做到这一点，直到这里提到的 CSS 形状和排除的东西在几年内被添加到浏览器中http://corlan.org/2012/03/16/css-bleeding-edge-features/

目前，基本的 CSS3 将允许您创建形状并旋转它们，但精度不高。您最好的选择可能是使用 SVG。

这是一个使用 SVG 从现有图像中制作拼图的示例：http: //lavadip.com/experiments/jigsaw/

更多信息可以在这里找到： https ://developer.mozilla.org/en-US/docs/SVG/Tutorial

如前所述，您可以使用http://raphaeljs.com/之类的库来帮助创建 SVG 图形。

一个警告，尽管这样做可能会很痛苦：-p

于 2012-12-01T23:43:51.453 回答