html -split一个页面成为所需的形状作为div？

Question

html -split一个页面成为所需的形状作为div？

我正在尝试将页面拆分成不同的形状,如下图所示: 想要的形状

问题是我正在尝试将div创建为图像中的形状,因此我可以将内容放入其中并通过更改css样式来更改颜色并使用JavaScript为它们提供效果.搜索网络我遇到了一些像CSS这样的网站诀窍创建CSS三角形,但这不是我想要的,因为我不能把内容放在这样的div中,并且无法得到我需要的形状,我想也许我可以用元素获得这样的结果,但我不是真的知道它是否合乎逻辑而不是可以得到我想要的效果？

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

Answer 1

bon*_*nez 2

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

HTML：

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

Run Code Online (Sandbox Code Playgroud)

CSS：

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

Run Code Online (Sandbox Code Playgroud)

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

更新：

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，11 月前
查看次数：	1762 次
最近记录：	12 年，11 月前