How to create shape image border with clickable container?(use HTML and CSS)

Question

I want create the border show in the picture but i want to stay clickable the under picture of frame.

I use a div on the other div,it's work but under div is not clickable. I use border image,but the corner of left bottom is not create like the picture. Any other way?

https://i.stack.imgur.com/z8HSs.jpg

I am using .png picture that cut center of that png picture. My code is this:

<div id="slideshow204" class="slideshow" style="position:absolute;top:22px;right: 34px;z-index: 1;">
  ......
  </div>
<div class="decor"><img style="position: absolute;z-index: 4;" src="http://shakeri.info/images/logo/zendeginameh.png" alt="">
</div>

For the div not clickable are you using z-index in css with a negative number value? — Davide, Aug 23 '16 at 22:10
You can see my demo work bottom of this page:
http://shakeri.info/ — Mojtaba Taheri, Aug 24 '16 at 06:38

score 0 · Accepted Answer · edited May 23 '17 at 10:30

0

problem solved. I must add

 pointer-events: none;

to the png's div to clickable under div. need detail? Click through a DIV to underlying elements

edited May 23 '17 at 10:30

Community

1
1

answered Aug 24 '16 at 10:13

Mojtaba Taheri

3
3

How to create shape image border with clickable container?(use HTML and CSS)

1 Answers1