Andreas Pflug: Textbox mit 3D-Rand in "Schrägansicht"

Beitrag lesen

SELF-Forum

Textbox mit 3D-Rand in "Schrägansicht"

Andreas Pflug
– Informationen zu den Bewertungsregeln

Hallo liebes Forum,

ich möchte auf einer Seite diverse mit CSS positionierte Textboxen platzieren, die einen 3D-Rand haben. Normalerweise geht das mit den border-Attributen ("outset" usw.) ja recht einfach. Der Haken: Ich möchte, dass die Textbox dreidimensional hervorsteht, als ob man schräg von unten-links draufgucken würde.

Um das ganze zu verdeutlichen, zweckentfremde ich mal einen Code-Block mit ASCII-Art:

  
     _______________  
   /|               |  
  | |               |  
  | |  Hier stehen  |  
  | | Informationen |  
  | |               |  
  | |_______________|  
  |/________________/

Dazu habe ich folgendes ausprobiert:

  
.infobox {  
  position:      absolute;  
  background:    #ffffff;  
  border-top:    none;  
  border-right:  none;  
  border-bottom: 10px blue outset;  
  border-left:   10px blue outset;  
}

Im HTML-Teil steht dann sowas wie

  
  <div class="infobox" style="left: 10%; top: 60%; width: 35%;">  
    <p class="bold">Hier stehen Informationen</p>  
  </div>

An der unteren linken Ecke des Textbox sieht das jeweils gut aus. Am oberen und rechten Rand schneiden die Farbränder jedoch gerade mit der Textbox ab, so dass der 3D-Effekt verlorengeht. In ASCII-Art sähe das so aus:

  
   _________________  
  | |               |  
  | |               |  
  | |  Hier stehen  |  
  | | Informationen |  
  | |               |  
  | |_______________|  
  |/________________|

Mit den anderen möglichen border-Attributen wird es auch nicht besser. Kann man eine 3D-Box in "Schrägansicht" überhaupt mit CSS-Mitteln erzeugen oder muss man sich dazu weiterer Tricks (Hintergrundgrafiken mit angeschrägten teiltransparenten Rändern, ...?) bedienen?

Viele Grüße

Andreas Pflug

Beitrag melden
–
Informationen zu den Bewertungsregeln