попробовал сделать на css (просто захотелось :-))
чтобы сторона с которой зашла мышь подсвечивалась
не будет только работать в IE < 10
<!DOCTYPE HTML>
<html>
<body>
<style>
.main {
width: 100px;
height: 100px;
border: 1px solid;
position: relative;
overflow: hidden;
margin: 30px;
}
div div {
width: 70px;
height: 70px;
position: absolute;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 0% 0%;
-moz-transform: rotate(45deg);
-moz-transform-origin: 0% 0%;
-o-transform: rotate(45deg);
-o-transform-origin: 0% 0%;
-ms-transform: rotate(45deg);
-ms-transform-origin: 0% 0%;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
.top { left: 50px; top: -50px; }
.right { left: 100px; top: 0; }
.bottom { left: 50px; top: 50px; }
.left { left: 0; top: 0; }
div div:hover {
background-color: red;
border: 71px solid white;
z-index: 1;
}
.top:hover { top: -150px; }
.right:hover { top: -100px; left: 100px; }
.bottom:hover { top: -50px; }
.left:hover { top: -100px; }
</style>
<div class="main">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</body>
</html>
