Vurgulu olayları yalnızca üçgenin sınırları içinde tetikleyecek bir CSS üçgeni nasıl oluşturabilirim (örneğin)? Pratikte, oyun üzerinde ve üzerinde durduğumuzda bulanık olması gereken farklı nesneler üzerinde konum olacaktır. Bu demo'da, span:hover stillerinin öğenin dikdörtgen sınırlarını girerken üçgende değil tetiklendiğine dikkat edin.Özel şeklin üzerine gelin. Nasıl?
Şekli, SVG polygon ile oluşturmaya ve :hover "gerçek" alanına saygı göstermeyi deneyebilirsiniz.
Not Bu yalnızca özel şekiller için saf bir css + SVG çözümüdür. Ve özel saf css ile oluşturulmaz şekil, ancak SVG ...
<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>
Çok basit CSS html
aitBiraz!
#shape:hover{fill:red;}
İşte bir working fiddle.
Tarayıcı desteği: This question tarayıcı desteğine biraz ışık gönderin. Kabul edilen yanıt yok, ancak görebildiğim kadarıyla, SVG'yi desteklemeyen tarayıcılar için çok kullanışlı bağlantılar ve alternatifler var.
Divanda üçgen yapmak ister misiniz? – PraJen
Bunu elementlerle yapabileceğinizi sanmıyorum ve muhtemelen 'canvas' kullanmanız gerekecek. –
, 'map' ve' area' çalışabilecek bazı etiketler var. http://www.w3schools.com/tags/tag_area.asp ayrıca bir üçgen çizebilirsiniz. –