#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 have a concept to place each image in an individual triangle div
struggling to find a way to implement this idea
reaching out for assistance on how it can be achieved.
please refrain from using the map tag, looking for independent areas