Forum Moderators: open
#DIV {
width: 100px;
height: 100px;
background: #000;
left: 50px;
top: 50px;
{
but for the output to be a diamond, so its a square layer just on an angle to make it ppear as i diamond!
any ideas?
Take a look at Eric Meyer's "slantastic" demos for one way of accomplishing it, or, do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slanted page</title>
<style type="text/css">
body {
background-color: #000;
}
#diamond {
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
border-left: 200px solid #000;
border-right: 200px solid #000;
border-bottom: 400px solid #fff;
width: 400px;
height: 1px;
font-size: 1px;
}
#text {
position: absolute;
top: 20px;
left: 10px;
width: 800px;
text-align: center;
}
#text span {
margin-bottom: .2em;
display: block;
}
</style>
</head>
<body>
<div id="diamond"></div>
<div id="text">
<span style="font-size: 10px;">a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y</span>
<span style="font-size: 10px;">z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z</span>
<span style="font-size: 11px;">a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y</span>
<span style="font-size: 11px;">z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z</span>
<span style="font-size: 11px;">a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c</span>
<span style="font-size: 12px;">d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f</span>
<span style="font-size: 12px;">g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k</span>
<span style="font-size: 12px;">l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q</span>
<span style="font-size: 13px;">r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v x</span>
<span style="font-size: 13px;">y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f</span>
<span style="font-size: 14px;">g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g h</span>
<span style="font-size: 14px;">i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g h i j k l</span>
<span style="font-size: 14px;">m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g h i j k l m n o p q</span>
<span style="font-size: 16px;">r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g h i j k l m n o p q r s t u v x</span>
<span style="font-size: 16px;">y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g</span>
<span style="font-size: 17px;">h i j k l m n o p q r s t u v x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g h i j k l m</span>
<span style="font-size: 18px;">n o p q r s t u v x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g h i j k l m n</span>
<span style="font-size: 18px;">o p q r s t u v x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g h i j k l m n o p</span>
<span style="font-size: 19px;">q r s t u v x y z a b c d e f g h i j k l m n o p q r s t u v x y z a b c d e f g h i j k l m n o p q r s</span>
</div>
</body>
</html>
I was thinking that he wanted the actual layer rotated, contents too, is this (above) what you meant humpingdan?
If so, sorry to steer you here!
Hmm, let's see if anything else can be dug up...
[edited by: DrDoc at 5:17 pm (utc) on Dec. 17, 2003]
Did you want it slanted (as in the example I posted), or rotated?
Did you want it slanted <snip>, or rotated?
Wedges, and supersize it... (hahaha)!
couldnt resist :}
i want to be able to place text and images in a div an then them look randomly placed on the page!
like theyve just been thrown down on to the page, but i want the entire contents and the layer to appear ion this way!
got it?
So, you want something like
···/\···
··//\\··
·///\\\·
////\\\\
\\\\////
·\\\///·
··\\//··
···\/···not
·····____·····
····///\\\····
···////\\\\···
··/////\\\\\··
·//////\\\\\\·
·ŻŻŻŻŻŻŻŻŻŻŻŻ·
There are ways... You would just have to find out what suits your needs the best. Cross browser compatibility is going to be a huge issue, as well as flexibility. Especially since text is involved...
1. Uses the IE filter
2. Uses an SVG method
3. Uses the DirectX Structured Graphic Control (SCG)
4. Not about rotating (it's about switching between divs)
5. Changes the coordinates of straight lines, circular arcs and sinus waves. It doesn't rotate normal content.
I know I'm being pedantic here by ruling out those other things as non-JavaScript, but I still say that JavaScript can't rotate content.
Of course some of those things found by your search could be really useful to humpingdan (if cross browser problems are within acceptable limits), and I learned a few things too, so thanks for the link ;)
To rotate text, a browser would have to convert the text into graphics first before rotating it (remember, it's the browser that does the work - JavaScript only gives it commands). No browser does this at the moment, AFAIK. Somebody please correct me if I'm wrong.
Of course, given that programs do exist that convert text into graphics, there may be a server-side solution.
