我在绘制具有不同形状的div时遇到了麻烦。示例是here。全部都在html / css / js中，因此查看它的来源不会有任何问题。 css是否有任何属性使其正常工作？我必须一直这样做吗？
问题 - 在点击不同部分时，div并不总是会改变颜色。
var colors = ["white","red","blue","green","yellow","purple"];
var names = ["none","próchnica","odbarwienie","coś1","coś2","coś3"];
var index = 0;
function button_click() {
index = (index + 1) % colors.length;
document.getElementById("box").style.backgroundColor = colors[index];
document.getElementById("boxname").innerHTML = " "+names[index];
}
function paint(color,id,type) {
var currentID = id;
if (type=="trapez") {
document.getElementById(currentID).style.borderBottomColor = color;
} else if (type=="triangle_left") {
document.getElementById(currentID).style.borderRightColor = color;
} else if (type=="triangle_right") {
document.getElementById(currentID).style.borderLeftColor = color;
}
}div#box
{
width:20px;
height:20px;
background-color: white;
border-color: black;
border-style: solid;
border-width: 1px 1px 1px 1px;
float: left;
}
.t1
{
width:50px;
height:50px;
background-color: white;
border-color: black;
border-style: solid;
border-width: 1px 1px 1px 1px;
float: right;
}
.line{
height:200px;
}
.container{
float:left;
margin-left:10px;
}
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid blue;
border-bottom: 50px solid transparent;
position:absolute;
margin-left:110px;
}
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid green;
border-bottom: 50px solid transparent;
position:absolute;
}
.trapezoid {
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 60px;
}
.trapezoid-rotated {
border-bottom: 50px solid gray;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 60px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}<div id="box" onclick="button_click();"></div><div id="boxname"> none</div>
<div class='line'>
<div class='container'>
<div id='a-1' class='triangle-left' onclick="paint(colors[index],this.id,'triangle_left');">
</div>
<div id='b-1' class='triangle-right' onclick="paint(colors[index],this.id,'triangle_right');">
</div>
<div id='center'>
<div id='c-1' class='trapezoid-rotated' onclick="paint(colors[index],this.id,'trapez');">
</div>
<div id='d-1' class='trapezoid' onclick="paint(colors[index],this.id,'trapez');">
</div>
</div>
</div>
<div class='line'>
<div class='container'>
<div id='a-2' class='triangle-left' onclick="paint(colors[index],this.id,'triangle_left');">
</div>
<div id='b-2' class='triangle-right' onclick="paint(colors[index],this.id,'triangle_right');">
</div>
<div id='center'>
<div id='c-2' class='trapezoid-rotated' onclick="paint(colors[index],this.id,'trapez');">
</div>
<div id='d-2' class='trapezoid' onclick="paint(colors[index],this.id,'trapez');">
</div>
</div>
</div>
答案 0 :(得分：1)
真正的问题是，你正在做的是一种黑客攻击，创建三角形和具有边框和透明度的梯形与创建多边形不同。如果您使用任何浏览器的Inspect Element，您将看到每个多边形正在使用的区域。
为了简化操作，我在Codepen上创建了代码，并使用SVG重新创建了代码。 http://codepen.io/laurosollero/pen/aOQmVW
<div class="new">
<h2>And now in SVG</h2>
<div id="box2" onclick="newButtonClick();"></div>
<div id="boxname2"> none</div>
<svg width="400" height="400">
<path id="trapezoid1" style="fill:#a0a0a0;fill-opacity:1;stroke:none" d="M 50,50 350,50 275,150 125,150 z" />
<path id="trapezoid2" style="fill:#ff0000;fill-opacity:1;stroke:none" d="M 50,250 125,150 275,150 350,250 z" />
<path id="triangle1" style="fill:#007100;stroke:none;fill-opacity:1" d="M 50,50 125,150 50,250 z" />
<path id="triangle2" style="fill:#0000ff;fill-opacity:1;stroke:none" d="M 350,50 350,250 275,150 z" />
</svg>
</div>
还有JS：
var colors = ["white","red","blue","green","yellow","purple"];
var names = ["none","próchnica","odbarwienie","coś1","coś2","coś3"];
var index = 0;
// new js code
var index1 = 0;
var forms = document.getElementsByTagName("path");
function newButtonClick() {
index1 = (index1 + 1) % colors.length;
document.getElementById("box2").style.backgroundColor = colors[index1];
document.getElementById("boxname2").innerHTML = " " + names[index1];
}
for (var a = 0; a < forms.length; a++) {
var elem = forms[a];
elem.onclick = function() {
// console.log(this);
document.getElementById(this.id).style.fill = colors[index1];
return false;
};
}
我尝试过不要改变太多的原始代码。
SVG是最佳选择。
答案 1 :(得分：0)
事实是你的div看起来像三角形，但它们仍然是矩形。因此，您的点击事件可能会触发错误的元素。
查看此处发布的解决方案 - Hover and click on CSS triangle。我认为这正是你所需要的。
答案 2 :(得分：0)
我认为问题是那些div不是三角形的xD它们只是位置的盒子：绝对的。它将取决于z-index触发哪一个
答案 3 :(得分：0)
这样做：
var names = ["none","próchnica","odbarwienie","coś1","coś2","coś3"];
var index = 0;
function button_click() {
index = (index + 1) % colors.length;
document.getElementById("box").style.backgroundColor = colors[index];
document.getElementById("boxname").innerHTML = " "+names[index];
}
function paint(color,e,type) {
switch (type) {
case "trapez":
e.style.borderBottomColor = color;
break;
case "triangle_left":
e.style.borderRightColor = color;
break;
case "triangle_right":
e.style.borderLeftColor = color;
break;
}
}
</script>
<body>
<div id="box" onclick="button_click();"></div><div id="boxname"> none</div>
<div class='line'>
<div class='container'>
<div id='a-1' class='triangle-left' onclick="paint(colors[index],this,'triangle_left');">
</div>
<div id='b-1' class='triangle-right' onclick="paint(colors[index],this,'triangle_right');">
</div>
<div id='center'>
<div id='c-1' class='trapezoid-rotated' onclick="paint(colors[index],this,'trapez');">
</div>
<div id='d-1' class='trapezoid' onclick="paint(colors[index],this,'trapez');">
</div>
</div>
</div>
<div class='line'>
<div class='container'>
<div id='a-2' class='triangle-left' onclick="paint(colors[index],this,'triangle_left');">
</div>
<div id='b-2' class='triangle-right' onclick="paint(colors[index],this,'triangle_right');">
</div>
<div id='center'>
<div id='c-2' class='trapezoid-rotated' onclick="paint(colors[index],this,'trapez');">
</div>
<div id='d-2' class='trapezoid' onclick="paint(colors[index],this,'trapez');">
</div>
</div>
</div>
</body>
</html>
答案 4 :(得分：0)
你的DIV不是真正的三角形。
我确实创建了一个重叠DIV的解决方案。在CSS中设置正确的位置有点棘手：
HTML：
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
CSS：
.container {
height: 75px;
width: 200px;
background-color: gray;
overflow:hidden;
display:block;
}
.top {
height: 37px;
width: 200px;
position: relative;
background-color: green;
}
.bottom {
height: 37px;
width: 200px;
position: relative;
background-color: yellow;
}
.left {
height: 50px;
width: 50px;
top:-62px;
left:-25px;
position: relative;
background-color: blue;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.right {
height: 50px;
width: 50px;
top:-112px;
left:175px;
position: relative;
background-color: blue;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
的JavaScript / jQuery的：
$(".top, .bottom, .left, .right" ).mouseenter(
function() {
$( this ).css("background","gray");
}
);
$(".top, .bottom, .left, .right" ).mouseleave(
function() {
$( this ).css("background","");
}
);
只使用mouseenter / mouseleave处理程序在jsfiddle上尝试：