Come aggiungere triangolo costituito nel corso di un tag div

Question

Ho un tag div,

__________ 
|   |  
|   |  
|   |  
|__________| 

voglio aggiungere un piccolo triangolo su di esso.

_______/\_ 
|   |  
|   |  
|   |  
|__________| 

Nota: desidero il tag div con il bordo di un determinato colore e il corpo div di un altro. Dì, il mio background div sarà bianco e il bordo dovrebbe essere blu. Vedi questo per favore. http://fiddle.jshell.net/pausP/

Answer 1

Utilizzando la casella iniziale con puntatore e ombre a http://cssarrowplease.com/ è possibile restyling loro di fare la forma desiderata:

.arrow_box { 
    top:40px; 
    position: relative; 
    background: #ffffff; 
    border: 1px solid #719ECE; /*set border colour here*/ 
    width: 200px; 
    height: 200px; 
    border-radius: 3px; 
    -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8)); /*set shadow colour and size here*/ 
    -moz-box-shadow: 0 1px 10px rgba(113, 158, 206,0.8); 
    filter: drop-shadow(0 1px 10px rgba(113, 158, 206,0.8)); 
} 
.arrow_box:after, 
.arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(255, 255, 255, 0); 
    border-bottom-color: #ffffff; 
    border-width: 19px; 
    left: 50%; 
    margin-left: -19px; 
} 
.arrow_box:before { 
    border-color: rgba(113, 158, 206, 0); 
    border-bottom-color: #719ECE; 
    border-width: 20px; 
    left: 50%; 
    margin-left: -20px; 
} 

http://fiddle.jshell.net/pausP/3/

se è necessario per spostare la freccia più a destra, poi basta giocare con left per .arrow_box:after e .arrow_box:before

Answer 2

È possibile creare l'immagine triangolare in un editor di grafica, quindi inserire l'immagine in DIV e quindi spostare il DIV su una coordinata fissa posizionando il DIV in modo assoluto e impostando le coordinate TOP e LEFT.

Answer 3

prima di tutto devi fare un'immagine come/\ con quella che vuoi un colore di bordo e poi salvare quella .png l'immagine della vostra posizione preferita per poi passare al codice CSS per il posizionamento e l'immagine in modo da utilizzare il seguente codice:

background-image: url (immagini/triangle_img.png); background-repeat: no-repeat; posizione-sfondo: alto;

E aggiungendo questo codice con gli stili div specificati. e sto solo dando il codice per posizionare un bordo di forma triangolare con il bordo della divisione

Answer 4

La risposta di "Pete" sopra http://fiddle.jshell.net/pausP/3/ mostra bene come farlo, gioca anche un po 'con i parametri per vedere come funzionano le cose. E per chi non capisce bene come funziona leggi questo articolo che mostra come sono fatti i triangoli, dai confini (intendo il principio). https://css-tricks.com/snippets/css/css-triangle .

Quindi è solo da usare prima e dopo, beh, possiamo usare solo uno dipende da ciò che vogliamo, infatti prima è usato per fare il triangolo blu e dopo un triangolo bianco sono sovrapposti uno sopra l'altro, con 1px diff per avere quel bordo nel triangolo, ma se non è necessario, per esempio si usa prima. (puoi cambiare il margine in avanti con un po 'per vedere com'è). Hop che è stato utile.