Utwórz trójkąt z CSS?

Question

Jak mogę utworzyć następujący kształt za pomocą CSS?

Próbowałem, że jest to rozwiązanie:

.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; 
    } 

Widać to działa na Triangle. To działa, ale dzięki sztuczce granic. Czy można to zrobić w inny sposób?

Stosując wektory SVG można to łatwo zrobić, ale nie chcę tak długo.

Answer 1

Znalazłem WebKit -tylko rozwiązanie, używając ▲ charakter:

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

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

Dodatki:

• CanIUse reference dla text-stroke
• CSS-tricks artykuł
• Useful HTML shapes

Answer 2

Spróbuj użyć 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> 

Oto 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> 

Będzie to trójkąt skierowany w stronę szczytu. Nie określaj granicy od strony, na której chcesz ją wskazać.

Powyższe jest trójkątem równobocznym. Usuń border-left, aby utworzyć trójkąt prostokątny.

Answer 4

wersja 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; 
} 

Dodawanie biały trójkąt wewnątrz czarnej jednym: http://jsfiddle.net/samliew/Hcfsx/

Answer 5

Rozważ użycie elementu <canvas>. Zbudowałem prosty trójkąt na jsfiddle - nic nadzwyczajnego, jeszcze.

<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

Można użyć metody opisałem tutaj: How does this CSS triangle shape work? z obróconym elementem pseudo. Następnie możesz dodać obramowanie do obróconego pseudo elementu, aby uzyskać efekt, którego szukasz.

Można również skorzystać z tej techniki, aby wyświetlić trójkąt z granicami na obrazku, gradient lub jakichkolwiek innych niż zwykły środowisk:

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>