XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Pfeil an CSS-Box (http://xhtmlforum.de/showthread.php?t=65314)

Cyborg 29.07.2011 17:08

Pfeil an CSS-Box
 
Hi,

ich möchte gerade ein Tooltip entwerfen und habe bisher folgendes Styling:

HTML-Code:

<html>
<head>
       
<style>

.tooltip {
        border-radius:8px;
        -webkit-border-radius:8px;
        -moz-border-radius: 8px;
        border: 1px solid white;
        box-shadow:0px 2px 4px #1e1e1e;
        -webkit-box-shadow: 0px 2px 4px #1e1e1e;
        -moz-box-shadow: 0px 2px 4px #1e1e1e;
        border: none;
        border-top: 1px solid white;
        background-color: #c9ccd1;
        background:-webkit-gradient(linear, left top, left bottom, from(#ebedf0), to(#c9ccd1));
        background:-moz-linear-gradient(top, #ebedf0, #c9ccd1); 
        width:160px;
        padding: 10px;
}

</style>
</head>

<body>

<div class="tooltip">Hallo Welt</div>

</body>

</html>

Das Tooltip passt sich später variable der Textgröße an.
Jetzt fehlt mir aber noch ein kleiner Pfeil, der in der Mitte nach unten zeigen soll.

Hat jemand einen Tipp für mich ?
Hier ist der Pfeil:
http://666kb.com/i/bvmctnjrv22qejmtc.png

Chris2011 29.07.2011 18:32

Dann mach das doch :D

gato 29.07.2011 20:17

Mit background-image einfügen und positionieren.

Nebenbei fehlt deinem Dokument ein Doctype. Bitte nachtragen und validieren, z.B.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:25 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023