Home/ Questions/Q 8937267
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T10:22:34+00:00

I’m trying to split a page into different shapes, as shown in this image:

  • 0

I’m trying to split a page into different shapes, as shown in this image:
desired shapes

The problem is I’m trying to create divs as the shapes in the image so I can put content in them and by changing the css styles change their colors and give them effects with JavaScript,
Searching the net I did come across some sites like CSS Tricks to create CSS Triangles, but that’s not exactly what I want because I cant put content in such a div and cant get exactly the shapes I need, I was thinking maybe I could get such results with the element, but i don’t really know if its logical to use instead of and can get the effect I want?

is there a way to divide an Html page into any desired shape?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    hmm, you can use css3 transformations (rotation):

    HTML:

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

    CSS :

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

    Of course, you shoud apply other styles (position: absolute, and others).

    UPDATE:

    copy’n’paste this code to see live example:

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