Geek Answers Handbook

Html -split page into desired shapes as divs?

I am trying to split the page into different shapes, as shown in this image: desired shapes

The problem is that I am trying to create divs as shapes in the image so that I can put content in them, as well as changing the css styles, changing their colors and giving them effects using JavaScript. Web search I came across some sites, for example CSS Tricks to create CSS triangles, but that’s not exactly what I want, because I can’t place the content in such a div and can’t get exactly the forms that I need, I thought maybe I could would get such results using an element, but I really don't know if it can be logically used Use instead of getting the effect I want?

is there any way to split the html page into any desired form?

+6
source share
2 answers

hmm, you can use css3 transforms (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 use other styles (position: absolute and others).

UPDATE:

copy'n'paste this code to see a 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>
+2
source

In general, you cannot do this with CSS until the CSS Shapes and Exclusions elements mentioned here have been added to the browser in a few years http://corlan.org/2012/03/16/css-bleeding-edge -features /

Now basic CSS3 will allow you to create shapes and rotate them, but not with great accuracy. It is best to use SVG.

Here is an example of using SVG to create a puzzle from an existing image: http://lavadip.com/experiments/jigsaw/

More information can be found here: https://developer.mozilla.org/en-US/docs/SVG/Tutorial

As mentioned earlier, you can use a library like http://raphaeljs.com/ to help create your SVG graphics.

Warning, although there may be pain in the back: -p

+2
source

More articles:


All Articles