The block is divided into two parts:
1. The upper part (gray), this is a map (Google, Yandex or TP) and it should be clickable
2. The bottom part (yellow color), this is the picture on which the clickable text is located (menu items, logo)
The main problem is how to make it so that both the map and the menu items are clickable?

footer

  • <div id = 'div1'> <div id = 'div2'> </ div> <div id = 'div3'> </ div> </ div> Where div1 is the place on the page where this miracle should be position: relative, div2 - what is a map, width 100% height 100, and div3 - what with your content on which you can poke, deploy and so on. div3 position: absolute - Geri4

1 answer 1

UPD:
In fact, for this task there is enough and one turned diva in a wrapper:

.wrapper { width: 500px; height: 300px; position: relative; overflow: hidden; } .child { position: absolute; width: 580px; height: 300px; right: -90px; top: 110px; transform: rotate(-25deg); background-color: yellow; } .child p { transform: rotate(25deg); float: right; margin: 100px 130px 0 0; } .child pa { color: black; font-weight: bold; text-decoration: none; } 
 <div class="wrapper"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d15990.24507003764!2d30.35555441672363!3d59.935782142696276!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1515617959614" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> <div class="child"> <p> <a href="">袩校袧袣孝 1</a><br /><br /> <a href="">袩校袧袣孝 2</a><br /><br /> <a href="">袩校袧袣孝 3</a> </p> </div> </div>

For example:

 .wrapper { width: 500px; height: 300px; position: relative; overflow: hidden; } .first { position: absolute; width: 500px; height: 300px; left: 0; top: 0; background-color: gray; } .second { position: absolute; width: 580px; height: 300px; right: -90px; top: 110px; transform: rotate(-25deg); background-color: yellow; } .second p { transform: rotate(25deg); float: right; margin: 100px 130px 0 0; } .second pa { color: black; font-weight: bold; text-decoration: none; } 
 <div class="wrapper"> <div class="first"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d15990.24507003764!2d30.35555441672363!3d59.935782142696276!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sru!4v1515617959614" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div> <div class="second"> <p> <a href="">袩校袧袣孝 1</a><br /><br /> <a href="">袩校袧袣孝 2</a><br /><br /> <a href="">袩校袧袣孝 3</a> </p> </div> </div>

That is, we create two absolutely positioned divas inside the wrapper and turn one of them the way we need. The specific angle of rotation, size, padding, etc. customize as desired.