Pfeil an CSS-Box

Cyborg · #1 (**permalink**) 29.07.2011, 16:08

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:

Chris2011 · #2 (**permalink**) 29.07.2011, 17:32

Dann mach das doch

gato · #3 (**permalink**) 29.07.2011, 19: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">

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!?	damonster	CSS	12	27.08.2008 15:56
CSS Box Zentrieren ich bekomme einen anfalll:(	designfreak	CSS	9	11.08.2007 16:25
ps design (slices), php (dynamischer inhalt), css gestaltung	schleepy	CSS	19	02.06.2006 22:46
bewegliche box mit css & js	b166-er	CSS	1	03.04.2006 15:30
Input box - verschiebt sich bei css formatierung	ATooM	CSS	5	05.04.2005 18:43