Crea un triangolo con CSS?

Question

Come posso creare la seguente forma con i CSS?

ho provato questo di essere una soluzione:

.triangle:after { 
     position:absolute; 
     content:""; 
     width: 0; 
     height: 0; 
     margin-top:1px; 
     margin-left:2px; 
     border-left: 10px solid transparent; 
     border-right: 10px solid transparent; 
     border-bottom: 10px solid white; 
    } 

    .triangle:before { 
     position:absolute; 
     content:""; 
     width: 0; 
     height: 0; 
     border-left: 12px solid transparent; 
     border-right: 12px solid transparent; 
     border-bottom: 12px solid black; 
    } 

Potete vederlo lavorare a Triangle. Funziona, ma con un trucco di confini. C'è un altro modo in cui potrebbe essere fatto?

Utilizzare i vettori SVG può essere fatto facilmente, ma non voglio andare così a lungo.

Answer 1

Ho trovato una soluzione -soloWebKit, utilizzando il carattere ▲:

.triangle { 
 
    -webkit-text-stroke: 12px black; 
 
    color: transparent; 
 
    font-size: 200px; 
 
}

<div class="triangle">&#9650;</div>

Extra:

• CanIUse reference per text-stroke
• CSS-tricks articolo
• Useful HTML shapes

Answer 2

prova utilizzando SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <polygon points="200,10 250,190 160,210" 
    style="fill:lime;stroke:purple;stroke-width:1"/> 
</svg> 

Ecco l'tutorial

Answer 3

.triangle{ 
    width:0; 
    border-bottom:solid 30px black; 
    border-right:solid 30px transparent; 
    border-left:solid 30px transparent; 
} 

<div class="triangle"> 
</div> 

Questo sarà un triangolo puntato verso l'alto. Non specificare il bordo sul lato dove è necessario che sia puntato.

Quanto sopra è un triangolo equilatero. Rimuovi border-left per trasformarlo in un triangolo rettangolo.

Answer 4

versione CSS-border:

.triangle { 
    position: relative; 
    width:0; 
    border-bottom:solid 50px black; 
    border-right:solid 30px transparent; 
    border-left:solid 30px transparent; 
} 
.triangle .empty { 
    position: absolute; 
    top:9px; 
    left:-21px; 
    width:0; 
    border-bottom:solid 36px white; 
    border-right:solid 21px transparent; 
    border-left:solid 21px transparent; 
} 

L'aggiunta di un triangolo bianco all'interno il nero: http://jsfiddle.net/samliew/Hcfsx/

Answer 5

Si consiglia di utilizzare l'elemento <canvas>. Costruisco un triangolo semplice su jsfiddle - niente di strano, ancora.

<canvas id="myCanvas" width="20" height="20"></canvas> 

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 

context.beginPath(); 
context.moveTo(10, 0); 
context.lineTo(20, 20); 
context.lineTo(0, 20); 
context.closePath(); 
context.fill(); 

Answer 6

È possibile utilizzare il metodo ho descritto qui: How does this CSS triangle shape work? con un elemento pseudo ruotato. È quindi possibile aggiungere un bordo all'elemento pseudo ruotato per creare l'effetto che si sta cercando.

È inoltre possibile utilizzare questa tecnica per visualizzare il triangolo con bordi su un'immagine, sfumatura o qualsiasi sfondi non semplici:

DEMO

.tr{ 
 
    width:40%; 
 
    padding-bottom: 28.28%; /* = width/sqrt(2) */ 
 
    position:relative; 
 
    border-bottom: 6px solid rgba(0,0,0,0.8); 
 
    border-right: 6px solid transparent; 
 
    border-left: 6px solid transparent; 
 
    overflow:hidden; 
 
} 
 
.tr:before{ 
 
    content:''; 
 
    position:absolute; 
 
    bottom:0; left:0; 
 
    width:100%; height:100%; 
 
    border-top:6px solid rgba(0,0,0,0.8); 
 
    border-left:6px solid rgba(0,0,0,0.8); 
 
    
 
    -moz-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
    
 
    -webkit-transform-origin:0 100%; 
 
    -ms-transform-origin:0 100%; 
 
    transform-origin:0 100%; 
 
    
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 

 
/* FOLLOWING JUST FOR THE DEMO */ 
 
body{background:url('http://lorempixel.com/output/people-q-g-640-480-1.jpg');background-size:cover;}

<div class="tr"></div>