Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Info Box mit CSS

Info Box mit CSS

Hallo, ich würde gerne eine variable Infobox mit CSS erstellen. Vom optischen so ähnlich wie die hier: Bild wie User es gerne hätte Mein Problem ist, das die Box ja in Ihrer Breite und Höhe variabel sein soll, je nachdem welchen Inhalt ich dort platziere. Mein Frage: kann man das überhaupt mit so einer Vorlage und CSS irgendwie machen? Danke für Eure Hilfe. Viele Grüße Michael

Der hier verwendete Code

<!doctype html> <html lang="de"> <head> <style> label,textarea{ width:80vw; margin:0 auto; display:block; } button{ width:300px; margin:0 auto; display:block; } textarea{ height:100px; } #helfer{ position:absolute; margin:0 10vw; } #box:before{ content:''; position:absolute; right:0; top:0; background-image:url('/image/klammer.png'); background-size:cover; z-index:10; display:block; height:50px; width:50px; } body{ background:green; } #box { border:1px solid black; border-top: 30px solid #252525; box-shadow: inset 0 3px 0 red,inset 0 3px 5px rgba(0,0,0,.5), 0 0 15px rgba(0,0,0,.28); background-color: #FFFFAF; background-image: linear-gradient(90deg, transparent 71px, #CB764A 69px, #CB764A 74px, transparent 74px, transparent 79px, #CB764A 79px, #CB764A 81px, transparent 80px), linear-gradient(#A4CE9A .1em, transparent .1em); background-size: 100% 20px; line-height: 21px !important; padding: 20px 20px 20px 100px ; } #box p { margin: 0 0 22px 0; vertical-align: baseline; } #box:after{ content:''; display:inline; border:1px solid black; box-shadow:0 20px 20px black; transform:rotate(4deg); position:absolute; z-index:-1; top:0; width:100%; height:90%; left:0; border-top: 30px solid #252525; box-shadow: inset 0 3px 0 red,inset 0 3px 5px rgba(0,0,0,.5), 0 0 15px rgba(0,0,0,.28); background-color: #FFFFAF; background-image: linear-gradient(90deg, transparent 71px, #CB764A 69px, #CB764A 74px, transparent 74px, transparent 79px, #CB764A 79px, #CB764A 81px, transparent 80px), linear-gradient(#A4CE9A .1em, transparent .1em); background-size: 100% 20px; transform-origin: 70% 50%; } </style> </head> <body> <label>Füge html Code ein</label> <textarea> <h2>Testinhalt</h2> <p>Hier im Beispiel ist jetzt html Code drinne <br>Was auch mit jeden anderen Inhalt klappen tut</p> </textarea> <button>Füge deinen Code oder text ein</button> <br> <br> <hr> <h4>Deine Infobox</h4> <div id="helfer"> <div id="box"> <h2>Testinhalt</h2> <p>Hier im Beispiel ist jetzt html Code drinne <br>Was auch mit jeden anderen Inhalt klappen tut</p> </div> </div> <script> document.getElementsByTagName('button')[0].addEventListener('click',function(){ text=document.getElementsByTagName('textarea')[0].value; document.getElementById('box').innerHTML=text; }) </script> </body> </html>