Durchsichtiger Teil in Popover

[djfabi]

Hallo Leute,

hat jemand eine Idee wie man sowas wie bei facebook machen kann?:

( hier am beispiel von google, facebook, microsoft)




also wie genau schafft facebook das, den pfeil da transparent zu machen, und den teil des titelbilds da zu haben ?

Wisst ihr was ich meine?:





ich hoffe ihr wisst nun was ich meine, und könnt mir helfen ?

Gruß ( und Frohe Ostern)

 

[omoxen]

hi, ich bin mir jetzt nicht sicher, aber ich würds so machen:

du hast zwei div boxen ineinander. Die äußere enthalt als background das Hintergrundbild. Das verschiebst du dann mit background-position:0 -20px; (wenn dein pfeil 20px hoch sein soll). Die innere box setzt du dann mit position:absolute; bottom:0; left:.. an den oberen Rand der äußeren Box und gibst ihr noch die entsprechende Breite und Höhe (z.B. 20px); Dann erbst du das Hintergrundbild des äußeren bildes mit background: inherit, setzt aber über diesen Background ein zweites Bild, das Die Form des Pfeils hat, aber außen weiß ist (damit es das restliche Bild überdeckt) und da, wo der eigentliche Pfeil ist transparent ist, bzw. am Rand ein Rahmen. Dann musst du noch die Background-position des äußeren Divs überschreiben: background-position: 10px(?) 0px;

Soweit ich weiß kann man inzwischen auch border-images setzen. Wenn es möglich wäre, border-bottom-image zu setzen, könntest du hier wieder das Bild vom äußeren ins innere Erben und border-top, border-right und border-left auf transparent setzen und jeweils die border-width auf z.B. 10px. Dann sollte auch eine Pfeilform entstehen. Bin mir da aber nicht ganz sicher ob das geht, und du müsstest evtl. den Background des äußeren Divs auch in den Border setzen, dass alles richtig geerbt wird (border-bottom-image: inherit)

Hoffe das war verständlich, omoxen.

 

[djfabi]

hallo omoxen,

danke für deine schnelle Antwort, aber leider kann ich es so nicht machen, weil:
1. ich ein <img /> Tag nehmen muss, da es auch (ähnlich wie bei facebook) immer andere Bilder sind.
2. Der Hintergrund kann nicht weiß sein, da mein Hintergrund ein Pattern ist, und es auch änderbar ist, oder es könnte ein Link daunter sein, also das geht nicht..

Hat sonst noch jemand eine Idee?

 

[omoxen]

<div style="position: fixed; background-image: url(http://img.pr0gramm.com/2013/03/ltitzkm.jpg); top: 100px; left: 100px; width: 300px; height: 200px; background-position: 0px -20px;">
   <div style="position: absolute; left: 20px; height: 20px; width: 20px; -webkit-transform: rotate(45deg); top: -10px; background-image: inherit; overflow-x: hidden; overflow-y: hidden;">
      <div style="left: 17px; width: 200px; height: 200px; -webkit-transform: rotate(-45deg); position: absolute; background-image: inherit; top: -82px;"></div>
   </div>
</div>

in Chrome getestet. Siehst ja selber wies funktioniert...

 

[djfabi]

ey cool, danke, nur eins ist bei mir noch nicht so "toll"

Chrome: funktioniert
Firefox: nicht
Opera: nicht
Safari: funktioniert

bei Firefox & Opera wird stattdessen ein Rechteck dargestellt, IE konnte ich nicht testen (wird in OSX nicht mehr entwickelt)

naja weißt du eine Lösung?

 

[djfabi]

ok, habs hinbekommen danke (einfach die -o- und moz- an das transform hängen, geht danke)