1

这是问题：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/

4

2 回答 2

0

我看不出你将如何使用边框来做到这一点，因为它们是块级元素并且需要作为块级元素是二次的。

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

<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>
于 2013-09-24T11:09:34.890 回答
0

刚刚通过使用两个 div 解决，一个带有“溢出：隐藏”，另一个带有“transform：rotate(45deg)”

对我来说完美

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

于 2013-09-25T09:22:30.977 回答