Menu
I'm trying to split a page into different shapes, as shown in this image:
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?
491
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>
In general you can't do that with CSS until the CSS Shapes and Exclusions stuff mentioned here gets added to browsers in a few years http://corlan.org/2012/03/16/css-bleeding-edge-features/
For now basic CSS3 will allow you to create shapes and rotate them, but not with much precision. Your best bet may be to use to use SVG.
Here's an example of using SVG to make a puzzle out of an existing image: http://lavadip.com/experiments/jigsaw/
A lot 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 with creating your SVG graphics.
A warning though it might be a pain in the backside to do :-p
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
