CSS3 abgerundete Ecke mit Google Map

So viel wie wir wollen, können wir derzeit nicht.

Die Alternative besteht darin, abgerundete Eckausschnitte über jede Ecke zu legen, damit die abgerundeten Ecken aussehen. Grundsätzlich erstellen Sie ein abgerundetes Quadrat, invertieren Sie es, so dass es eine ausgeschnittene Form wird, in 4 Eckstücke aufgeteilt, positionieren Sie jede Ecke in einem übergeordneten Container.

Beispiel

Ich hatte zur Zeit das gleiche Problem mit Safari und Chrome. Ich musste translate3d für Chrome auf Null setzen und ein Webkit-Mask-Image für Safari hinzufügen:

Sie müssen das div im Map-Element stylen, nicht im map-Element.

Wenn Sie denselben Effekt ohne Verwendung eines Bildes erzielen möchten, finden Sie hier eine Lösung für Ссылка . Sie können auch einen verblassten inneren Rahmen hinzufügen, wenn Sie möchten, ohne die Navigation in der Karte zu unterbrechen.

Hier ist der Code für den HTML:

Und der Stil (scss):

Ich habe diese Idee kürzlich in einem Projekt umgesetzt, an dem ich gerade arbeitete. Hier ist ein Beispiel, wie ich es zum Laufen gebracht habe ...

Live-Vorschau: Ссылка

HTML ...

Mit dem folgenden CSS ...

Sie müssen eine alternative Lösung finden, da Google Map v3 die Verwendung der border-radius -Eigenschaft, die Sie verwenden möchten, nicht unterstützt.

Dies wurde in einer anderen Antwort vorgeschlagen, aber es fehlte z-index:1 im CSS, so dass es selbst im JSFiddle nicht funktionierte.

HTML ist:

Und das CSS:

JSFiddle