Создать треугольник с помощью CSS?

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

Enter image description here

я попробовал это решение:

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

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

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

11
css css-shapes html

7 ответов

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

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}
<div class="triangle">&#9650;</div>

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

11

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/

8

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

здесь учебник

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

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

это будет треугольник заостренный к верху. Не указывайте границу в ту сторону, куда она должна быть направлена.

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

3

рассмотрите возможность использования <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();
3

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

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

демо

.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>
2

Я нашел хорошее решение, немного сложно, но для меня это был самый простой способ сделать это: ссылка на code-pen

.triangle {
position: absolute;
margin: auto;
top: -70px;
left: 0;
right: 0;
width: 137px;
height: 137px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 4px solid #e74c3c;
border-bottom: 4px solid #e74c3c;

}

0