Question

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我想插入独立的三角形div

但我没有找到任何方法来实现我的想法

所以我写信是为了寻求你的帮助。

请不要使用map tag（），我想要独立区域

Answer 1

如果我没有错，你需要能够在div的三角形区域中单击而不是所有方形大小。

如果是这样，只需在div onclick函数中添加一个关于鼠标坐标的检查：你知道三角形的尺寸，例如，如果它正在用一个对角线切割一个方形div，那就是这样做的方法：

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

这在右上三角形的上方广场上运行。如果您需要更复杂的坐标，请尝试记住笛卡尔坐标的高中公式，以了解点是否在三角形内。

希望有用

如何在三角形div中插入img？

1 个答案: