6

この画像に示すように、ページをさまざまな形に分割しようとしています。 希望の形

問題は、画像の形状としてdivを作成しようとしていることです。これにより、コンテンツを配置でき、cssスタイルを変更することで、JavaScriptを使用して色を変更し、効果を与えることができます。ネットを検索すると、 CSSなどのサイトに出くわしました。 CSS Trianglesを作成するための秘訣ですが、コンテンツをそのような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);
}

もちろん、他のスタイル（位置：絶対など）を適用する必要があります。

アップデート：

このコードをコピーして貼り付けると、実際の例が表示されます。

<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 に答える