Wie erstelle ich ein CSS-Dreieck (zum Beispiel), das das Hover-Ereignis nur innerhalb der Grenzen des Dreiecks auslöst?Bewegen Sie den Mauszeiger zur benutzerdefinierten Form. Wie man?
In der Praxis wird es Ort auf dem Spiel und verschiedene Objekte darauf sein, die verschwimmen sollten, wenn wir es schweben.
Beachten Sie in diesem demo, dass die span:hover Stile beim Eingeben der Rechteckgrenzen des Elements, nicht Dreieck auslösen.
Sie könnten versuchen, die Form mit SVG polygon zu erstellen, und :hover respektieren seinen "wahren" Bereich.
Hinweis Dies ist eine reine CSS + SVG-Lösung nur für benutzerdefinierte Formen. Und die eigene Form ist sie nicht mit reinem CSS erstellt, aber SVG ...
Ein wenig 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>
Sehr einfache CSS!
#shape:hover{fill:red;}
Hier ist ein working fiddle.
Browser-Unterstützung: This question etwas Licht in die Browser-Unterstützung senden. Es gibt keine akzeptierten Antworten, aber soweit ich sehen kann, gibt es sehr nützliche Links und Alternativen für Browser, die SVG nicht unterstützen.
Möchten Sie in div Dreieck machen? – PraJen
Ich glaube nicht, dass Sie es mit Elementen machen können und wahrscheinlich 'canvas' verwenden müssen. –
gibt es einige Tags, die funktionieren könnten, 'map' und' area'. http://www.w3schools.com/tags/tag_area.asp Sie können auch ein Dreieck zeichnen. –