How to insert img in triangle div?

Question

#d1{
    width: 0; 
    height: 0; 
    border: 500px solid blue;
    border-top-width: 0;
    border-left-width: 0;
    border-right-color: transparent;
    border-left-color: transparent;
    margin: 0px;
    float:left;
}
#img1 {
    

}

#img2 {
    
}

#d2{
    width: 0; 
    height: 0; 
    border: 500px solid ;
    border-bottom-width: 0;
    border-right-width: 0;
    border-right-color: transparent;
    border-left-color: transparent;
    margin: 0px;
}

<html><head>

</head>

<body>
<div id ="d1"><a href="#"><img src ="Desert.jpg" id = "img1"/> </a> </div>
<div id ="d2"><a href="#"><img src ="#" id = "img2"> </a> </div>
</body></html>

i want to insert in independent triangle div

but i did't find any method to make my idea

so I'm writing to ask for your help.

please dont use map tag(), i wannna independent area

Possibly a duplicate of this: http://stackoverflow.com/questions/10969941/css3-triangle-shape-with-background-image (It's @Ana who has a relevant answer) — Aaron Lavers, Apr 06 '16 at 07:26

score 0 · Answer 1 · answered Apr 06 '16 at 07:41

if i'm not wrong you need to be able to click just in a triangle area of a div instead all his square size.

if this, just add in the div onclick function a check about the coordinates of the mouse: you know dimensions of the triangle, for example if it's cutting a square div by one diagonal, that's the way to do it:

https://jsfiddle.net/3tdysenL/8/

this run on upper square for top-right triangle. if you need more complex coords, just try to remember high school formulas for cartesian coords to understand if a point is inside a triangle.

hope to be useful

How to insert img in triangle div?

1 Answers1