Tạo tam giác bằng CSS?

Question

Làm cách nào để tạo hình dạng sau bằng CSS?

Tôi cố gắng này là một giải pháp:

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

Bạn có thể nhìn thấy nó làm việc tại Triangle. Điều này đang làm việc, nhưng với một mánh khóe biên giới. Có cách nào khác có thể thực hiện được không?

Sử dụng vectơ SVG điều này có thể được thực hiện dễ dàng, nhưng tôi không muốn đi theo chiều dài đó.

Answer 1

Tôi đã tìm thấy một giải pháp -only WebKit, sử dụng ▲ nhân vật:

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

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

Extras:

• .210 cho text-stroke
• CSS-tricks bài viết
• Useful HTML shapes

Answer 2

Hãy thử sử dụng 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> 

Đây 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> 

Đây sẽ là một hình tam giác nhọn về phía đỉnh. Không chỉ định đường viền ở bên cạnh nơi bạn cần nó.

Ở trên là hình tam giác đều. Xóa border-left để biến nó thành hình tam giác bên phải.

Answer 4

phiên bản CSS biên giới:

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

Thêm một hình tam giác màu trắng bên trong màu đen một: http://jsfiddle.net/samliew/Hcfsx/

Answer 5

Xem xét sử dụng các yếu tố <canvas>. Tôi xây dựng một hình tam giác đơn giản trên jsfiddle - không có gì lạ mắt.

<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

Bạn có thể sử dụng phương pháp tôi đã mô tả ở đây: How does this CSS triangle shape work? với một yếu tố giả xoay. Sau đó, bạn có thể thêm đường viền vào phần tử giả được xoay để tạo hiệu ứng bạn đang tìm kiếm.

Bạn cũng có thể sử dụng kỹ thuật này để hiển thị hình tam giác với biên giới trên một hình ảnh, độ dốc hoặc bất kỳ nguồn gốc không rõ ràng:

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>