Textformatierung in einem Parallelogramm

[LP-Tobi]

Hi!
Hoffe ihr könnt mir helfen.
Ich habe mittels CSS einen div in ein Parallelogramm formatiert.
In diesem Prallelogramm möchte ich Text darstellen,
leider ist der Text nun auch schräg ausgerichtet.
Wie bekomme ich die Schrift wieder normal ausgerichtet?

Wäre dankbar für jede Antwort.

Codebeispiel:

<style type="text/css">
#parallel{
    min-width: 700px;
    min-height: 600px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    transform: skew(20deg);
    background: red;
    left:120px;
    top:0px;

    position:absolute;


}
</style>

<div id="parallel"> Lorem ....</div>

 

[threadi]

Hab sowas nie probiert - interessante Idee. Versuch es mal mit ineinander liegenden Elementen. Dem äußeren gibst Du die jetzigen Eigenschaften, dem inneren keine oder Du stellst die Eigenschaften zurück auf Normalwert. Ein <p> um den Text könnte vlt. ja auch schon helfen?

 

[LP-Tobi]

hmm Ein <p> reicht leider nicht und ein inneres Element bekommt die Eigenschaften vereerbt:-)

hab es erstmal so gelöst:
einen div rein gesetzt und mit css so deklariert....

#text
{
        -webkit-transform: skew(-20deg);
       -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);
    transform: skew(-20deg);
    color:#999;
    font: 14px facitweb, arial, sans-serif;
    z-index:3;
    
}

Ist haber nicht wirklich eine gute Lösung, da man über das Parallelogramm hinaus schreiben kann.
Muss ich mich noch genauer mit beschäftigen, aber vielleicht hat das ja schonmal gemacht?