border-imageプロパティが埋め込まれたGoogleマップが埋め込まれていますか？

Question

JS Fiddle

<div class="banner"> 
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13004077.93320049!2d-104.65674178116879!3d37.27560719446957!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1513191558069" width="500" height="500" frameborder="0" style="border:0" allowfullscreen></iframe> 
</div> 

.banner { 
border-style: solid; 
border-width: 20px 20px 20px 20px; 
border-image: url(https://i.imgur.com/5OgMQoX.png) 35 35 35 35; 
height: 500px; 
width: 500px; 
position: relative; 
overflow: hidden; 

}

私は、すなわち、実際にボーダーのdivを埋めるためにマップを好む彼らはに覗くないように丸みを帯びた角を持つ、境界画像のエッジに達するだろう国境の反対側。これは可能なことですか？

Answer 1

これは実際に画像に依存し、border-image you have used is not really rectangularの理由から、iframeのエッジと境界画像の間にギャップがあるのですが、私は得ることができるほど近くになるようにtweak the values aroundしようとしました。お役に立てれば。

.banner { 
 
    border-style: solid; 
 
    border-image: url(https://i.imgur.com/5OgMQoX.png) 20 35 25 35; 
 
    border-width: 20px 20px 20px 20px; 
 
    height: 500px; 
 
    width: 500px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding: 0; 
 
} 
 

 
.banner iframe { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="banner"> 
 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13004077.93320049!2d-104.65674178116879!3d37.27560719446957!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1513191558069" 
 
    width="500" height="500" frameborder="0" style="border:0" allowfullscreen></iframe> 
 
</div>