Wie Einfügen von Img in Dreieck div?

#d1{ 
 
    width: 0; 
 
    height: 0; 
 
    border: 500px solid blue; 
 
    border-top-width: 0; 
 
    border-left-width: 0; 
 
    border-right-color: transparent; 
 
    border-left-color: transparent; 
 
    margin: 0px; 
 
    float:left; 
 
} 
 
#img1 { 
 
    
 

 
} 
 

 
#img2 { 
 
    
 
} 
 

 
#d2{ 
 
    width: 0; 
 
    height: 0; 
 
    border: 500px solid ; 
 
    border-bottom-width: 0; 
 
    border-right-width: 0; 
 
    border-right-color: transparent; 
 
    border-left-color: transparent; 
 
    margin: 0px; 
 
}

<html><head> 
 

 
</head> 
 

 
<body> 
 
<div id ="d1"><a href="#"><img src ="Desert.jpg" id = "img1"/> </a> </div> 
 
<div id ="d2"><a href="#"><img src ="#" id = "img2"> </a> </div> 
 
</body></html>

ich will

in unabhängigem Dreieck div einzufügen, aber ich did't jede Methode finden, um meine Idee

so schreibe ich bitte um Ihre Hilfe zu machen.

bitte Nutzungskarte Tag nicht(), i wannna unabhängigen Bereich

Quelle

2016-04-06 Sym

Möglicherweise ein Duplikat davon zu sein: http://stackoverflow.com/questions/10969941/css3-triangle-shape-with-background-image (es ist @Ana, die eine relevante Antwort hat) –

danke so !!!!!!!!!!!!! viel – Sym

wenn ich nicht falsch liege man nur in einem Dreieck Bereich eines div statt alle seine quadratische Größe in der Lage sein müssen, klicken. Wenn Sie dies tun, fügen Sie einfach in der div onclick Funktion eine Kontrolle über die Koordinaten der Maus ein: Sie kennen die Dimensionen des Dreiecks, zum Beispiel, wenn es ein Quadrat div um eine Diagonale schneidet, das ist der Weg es zu tun:

https://jsfiddle.net/3tdysenL/8/

Dies läuft auf oberes Quadrat für top-rechtwinkliges Dreieck. Wenn Sie komplexere Koordinaten benötigen, versuchen Sie sich an Highschool-Formeln für kartesische Koordinaten zu erinnern, um zu verstehen, ob ein Punkt innerhalb eines Dreiecks liegt.

Hoffnung nützlich

Quelle

2016-04-06 07:41:28

Wie Einfügen von Img in Dreieck div?

Antwort

Verwandte Themen