Создайте треугольник с CSS?

Question

Как создать следующую форму с помощью CSS?

Я попытался это должно быть решение:

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

Вы можете видеть, что это работает на Triangle. Это работает, но с трюком границ. Есть ли другой способ сделать это?

Использование векторов SVG это можно сделать легко, но я не хочу идти так долго.

Answer 1

Я нашел WebKit -Только решение, используя ▲ характер:

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

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

Дополнительно:

• CanIUse reference для text-stroke
• CSS-tricks статьи
• Useful HTML shapes

Answer 2

Попробуйте использовать 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> 

Вот 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> 

Это будет треугольник, обращенный к вершине. Не указывайте границу в сторону, где вам нужно, чтобы она была указана.

Вышеуказанный равносторонний треугольник. Удалите border-left, чтобы сделать его прямоугольным треугольником.

Answer 4

версия CSS-граница:

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

Добавление белого треугольника внутри черные одного: http://jsfiddle.net/samliew/Hcfsx/

Answer 5

Рассмотрите возможность использования <canvas> элемента. Я строю простой треугольник на jsfiddle - ничего не придумал.

<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

Вы можете использовать метод, который я описал здесь: How does this CSS triangle shape work? с повернутым псевдо элементом. Затем вы можете добавить границу к повернутому псевдоэлементу, чтобы создать эффект, который вы ищете.

Вы также можете использовать эту технику, чтобы отобразить треугольник с границами над изображением, градиент или любой не простые фоны:

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>