html - 4个三 Angular 形div上的悬停效果

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 个三 Angular 形 div 在悬停时完美运行吗？

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

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

Answer 1

我看不出你会如何处理边框，因为它们是 block 级元素并且需要作为 block 级元素的二次方。

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

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