Jak utworzyć trójkąt CSS (na przykład), który wyzwoli zdarzenie najechania tylko wewnątrz granic trójkąta?Ustaw kursor na własny kształt. Jak?
W praktyce będzie to lokalizacja w grze i różne obiekty na niej, które powinny się rozmazać, jeśli najechamy na nią.
Zawiadomienie w tym demo, że style span:hover są wyzwalane przy wprowadzaniu prostokątnych granic elementu, a nie trójkąta.
Możesz spróbować utworzyć kształt za pomocą SVG polygon, a :hover będzie szanował jego "prawdziwy" obszar.
Uwaga to jest czyste rozwiązanie CSS + SVG tylko dla niestandardowych kształtów. A kształt zwyczaj nie jest tworzona z czystym CSS, ale SVG ...
Trochę html
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="60,0 0,120 120,120" id="shape"/>
</svg>
Bardzo prosty CSS!
#shape:hover{fill:red;}
Oto working fiddle.
Obsługa przeglądarki: This question wysłać trochę światła do obsługi przeglądarki. Nie ma akceptowanych odpowiedzi, ale jak widzę, istnieją bardzo przydatne linki i alternatywy dla przeglądarek, które nie obsługują SVG.
Czy chcesz, aby div tworzył trójkąt? – PraJen
Nie sądzę, że możesz zrobić to z elementami i prawdopodobnie będziesz musiał użyć 'canvas'. –
Istnieje kilka tagów, które mogą działać, 'map' i' area'. http://www.w3schools.com/tags/tag_area.asp możesz również narysować trójkąt. –