Question

这是问题：http://jsfiddle.net/Coffeeh/SVwsW/

.a{
   width: 0px;
   height: 0px; 
}
.L {
    border-top: 50px solid transparent;
    border-left: 50px solid #ff0000;
    border-bottom: 50px solid transparent;
    float: left;
}
.L:hover{
border-left: 50px solid #ffcc00;
}
.T {
    border-right: 50px solid transparent;
    border-top: 50px solid #ff0000;
    border-left: 50px solid transparent;
}
.T:hover{
border-top: 50px solid #ffcc00;
}
.B {
    border-right: 50px solid transparent;
    border-bottom: 50px solid #ff0000;
    border-left: 50px solid transparent;
}
.B:hover{
border-bottom: 50px solid #ffcc00;
}
.R {
    border-top: 50px solid transparent;
    border-right: 50px solid #ff0000;
    border-bottom: 50px solid transparent;
    float: right;
}
.R:hover{
border-right: 50px solid #ffcc00;
}

如何让这个4个三角形div在悬停时完美运作？

带有1个4边框div的选项不符合要求

解决：http://jsfiddle.net/Coffeeh/tg3ER/

Answer 1

我无法看到你如何使用边框，因为它们是块级元素，并且需要是块级元素的二次方。

我可以建议使用图像和图像映射。

<img src="/images/map.gif" alt="HTML Map" border="0" usemap="#map"/>

<map name="map">
   <area shape="poly" 
            coords="74,0,113,29,98,72,52,72,38,27"
            href="index.htm" alt="area1" />

   <area shape="poly" 
            coords="22,83,126,125"
            href="index.htm" alt="area2" />

   <area shape="poly" 
            coords="73,168,32"
            href="index.htm" alt="area3" />
</map>

Answer 2

刚刚使用两个div解决，一个用＆＃34;溢出：隐藏＆＃34;另一个用＆＃34;变换：旋转（45度）＆＃34;

对我来说是完美的

这里是小提琴： jsfiddle.net/Coffeeh/tg3ER

悬停效果对4个三角形div

2 个答案: