텍스트를 저장하고 닫을 때 닫는 삼각형 div 만들기

Question

텍스트와 이미지를 고정 된 삼각형 div를 만드는 방법은 무엇입니까?

또한 내가 한 것은 this 이었지만 div가 호버에서 열렸을 때 나 밖으로 마우스를 가져 가면 div가 정사각형 모양으로 닫히지 않습니다. 그래서 순간 사용자가해야 할 일이 무엇입니까? 밖으로 나가면 div가 닫혀 야합니까?

jQuery를 괜찮을 너무

CSS

.map { 
    background-color: transparent; 
    position: absolute; 
    border-top: 0px; 
    border-right: 500px solid transparent; 
    border-left: 0; 
    border-bottom: 500px solid #ff0000; 
    width: 0; 
    position: fixed; 
    bottom: -440px; 
} 

.map:hover { 
    bottom: 0px; 
} 

Another fiddle

Answer 1

당신은 예를 들어 크롬의 요소를 검사하는 경우, youu 당신이 트릭 DIV 남아를 만들 테두리를 사용하는 altho을 볼 것이다 사각형 위에 마우스를 올리면 왼쪽 하단에 표시됩니다. 500x500 픽셀

마우스 추적을 고려할 수 있습니다. 당신이 원하는 것을 얻기 위해서

$(".map").click(function(e){ 
    var parentOffset = $(this).parent().offset(); 
    //or $(this).offset(); if you really just want the current element's offset 
    var relX = e.pageX - parentOffset.left; 
    var relY = e.pageY - parentOffset.top; 
});