tropenberta: dreieck mit text

SELF-Forum

dreieck mit text

tropenberta
– Informationen zu den Bewertungsregeln

hi leuts

brauche für ne seite einen div container in form eines dreiecks, indem dann text stehen soll.
hab folgendes im netz gefunden :

  
<div style="width: 0px; height: 0px; border-left: 300px solid transparent; border-right: 300px solid  transparent; border-bottom: 600px solid #00ff00;">  
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.  
</div>

bei diesem beispiel bekomm ich nen dreieckigen div, aber der text innerhalb des dreiecks wird zentriert und geht über die linie des dreiecks drüber und es stehen alle wörter zentriert untereinander, jedes wort ne neue zeile.

ziel ist es aber einen text innerhalb des divs zu bekommen der sich dem dreieck anpasst.

lg
micha

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. dreieck mit text

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, tropenberta!

    <div style="width: 0px; height: 0px; border-left: 300px solid transparent; border-right: 300px solid  transparent; border-bottom: 600px solid #00ff00;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
    </div>

    
>   
> bei diesem beispiel bekomm ich nen dreieckigen div, aber der text innerhalb des dreiecks wird zentriert und geht über die linie des dreiecks drüber und es stehen alle wörter zentriert untereinander, jedes wort ne neue zeile.  
  
Ja, wenn du dir das Teil (zur Not mit einem Entwicklerwerzeug) anschaust, siehst du, dass es keine Inhaltsbreite hat, das geht also so schon mal nicht.  
  
Ich wüsste nicht, wie man das ohne JS lösen sollte.  
  
Idee: div mit Dreieck als Hintergrund (linear-gradient). Inhalt des divs sind zentrierte span-Elemente mit display block und unterschiedlichen Maximalbreiten. Der Inhalt wird per JS in die einzelnen Span-Elemente verteilt.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Mark und Markt](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=M#mark).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. dreieck mit text

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@tropenberta:

    nuqneH

    ziel ist es aber einen text innerhalb des divs zu bekommen der sich dem dreieck anpasst.

    CSS Shapes. Zukünftig.

    Gegenwärtig wohl nur mit Hacks.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. dreieck mit text

    tropenberta
    – Informationen zu den Bewertungsregeln

    hi gunnar, hi matthias

    vielen dank für eure antworten.

    total doofes problem. mach es eventuell so wie du geschrieben hast matthias.

    wenn ihr ne seite kennt die so etwas umsetzt, würde ich die mal gerne anschauen.

    wenn ihr irgend einen link habt wo sowas schon vorgefertigt ist, immer her damit.

    gruß micha

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  4. dreieck mit text

    Thomas Luethi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Ein weiterer, älterer Hack wäre sowas: CSS Slantastic (Eric Meyer)

    Und dann gibt es noch den CSS Text Wrapper.
    (Braucht zum Rumspielen wohl Flash, gibt dann HTML + CSS + JS aus.)

    Beides ist mMn ein ziemliches Gebastel, nicht sehr elegant...
    Aber in der Liebe, im Krieg und im Webdesign sind alle Mittel erlaubt.

    Freundliche Grüsse
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln