/* box trzymający buzię z językiem */ div.kontener{ position:absolute; width:66px; border:0; padding:0; margin: 66px 0 0 15px; } /* definiujemy język */ .tongue{ position:relative; display:block; overflow:hidden; -moz-border-radius: 0 0 69px 69px; -webkit-border-radius: 0 0 69px 69px; -o-border-radius: 0 0 69px 69px; width: 66px; height: 22px; background: white; border: 1px black solid; } .dot{ /* okrąg tworzący jedną stronę języka */ position:absolute; background:red; width:36px; height:36px; -moz-border-radius: 99px; -webkit-border-radius: 99px; -o-border-radius: 99px; -moz-box-shadow: 2px -2px 5px #888888; -webkit-box-shadow: 2px -2px 5px #888888; -o-box-shadow: 2px -2px 5px #888888; } #ldot{ /* pozycjonowanie lewego okręgu języka */ left: 3px; top: 5px; margin:0; } #rdot{ /* pozycjonowanie prawego okręgu języka */ right: 6px; top: 5px; margin:0; }
Tak to wygląda w Firefox: http://screenshooter.net/0487525/magjvlo
A tak w Chrome: http://screenshooter.net/0487525/bfhjeen
Może uzyc do tego tła z transparentem zamiast overflow?