border: рамка вокруг точки

Свойство border-width нельзя устанавливать в процентах.

Генератор треугольника с border

<style>
div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5em; /* размер и форма */ 
  border-color: red transparent transparent red;  /* red — цвет */ 
  filter: drop-shadow(0 0 5px #000);  /* тень */ 
}
</style>
    
<div></div>

border-radius: с закруглёнными углами

<style>
div {
  width: 0;
  height: 0;
  border: 3.5em solid;
  border-color: red transparent transparent red;
  border-radius: 10px;
}
</style>
    
<div></div>

clip-path: обрезать HTML-элемент

Можно делать адаптивные треугольники любой формы с любой фоновой картинкой, но пока поддержка браузеров хромает.

Генератор треугольника с clip-path

<style>
div {
  width: 7em;
  height: 7em;
  clip-path: polygon(100% 0, 50% 100%, 0 0);  /* как в SVG: площадь элемента — это система координат, три вершины треугольника разделяются запятой — 100% 0, 50% 100%, 0 0, местоположение вершины определяется двумя значениями — 100% 0, первое 100% — положение по горизонтали, второе 0 — положение по вертикали */ 
  filter: drop-shadow(0 0 5px #000);
  background: red url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s400/romashki.jpg);
}
</style>
    
<div></div>

shape-inside: текст в треугольнике

С shape-outside, внешний текст будет обтекать элемент. Лучше использовать свойство shape-inside, но оно не имеет поддержки в браузерах.
<style>
#raz2 {
  max-width: 27em;
  height: 10em;
  border: 2px solid red;
  text-align: justify;  /* выровнять по ширине */ 
  hyphens: auto;
}
@supports (shape-outside: polygon(100% 0, 100% 100%, 0 100%)) {
  #raz2:before {
    content: '';
    float: right;
    height: 100%;
    width: 100%;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    shape-outside: polygon(100% 0, 100% 100%, 0 100%);
    background: mistyrose;
  }
}
</style>

<div lang="ru" id="raz2">текст</div>

linear-gradient в background: фон наполовину

Генератор треугольника с background

<style>
div {
  width: 7em;
  height: 7em;
  filter: drop-shadow(0 0 5px #000);
  background: linear-gradient(to right top, transparent 50%, red 50%) left / 50% 100% no-repeat, linear-gradient(to left top, transparent 50%, red 50%) right / 50% 100% no-repeat;
}
</style>
    
<div></div>

linear-gradient в mask: наложить маску на HTML-элемент

Обрезает всё, выходящее за рамки треугольника. Можно делать адаптивные треугольники с любым фоном и любой формы, если вместо linear-gradient использовать SVG, но пока поддержка браузеров хромает.

Генератор треугольника с mask

<style>
div {
  width: 7em;
  height: 7em;
  filter: drop-shadow(0 0 5px #000);
  mask: linear-gradient(to right top, transparent 50%, red 70%) left / 50% 100% no-repeat, linear-gradient(to left top, transparent 50%, red 70%) right / 50% 100% no-repeat;;
  background: red url(http://2.bp.blogspot.com/-mvoZS1oSdK8/TktsiBc4voI/AAAAAAAACLQ/MKaAYSFJvlo/s400/romashki.jpg);
}
</style>
    
<div></div>

Символ треугольника

Точные размеры не узнать: зависят от шрифта и браузера.

▲▼▶►◄◀◤◥◣◢
△▽▷▻◅◁◸◹◺◿
▼ 
<style>
#raz3 {
  font-size: 7em;
  line-height: 1;
  text-shadow: 0 0 5px #000;  /* тень у текста */ 
  color: red;
}
</style>

<span id="raz3">▼</span>

Резиновый треугольник SVG

Одна из самых простых фигур, которой достаточно поля 2 на 2.

Генератор треугольника с SVG

<svg width="7em" height="7em" viewBox="0 0 2 2" preserveAspectRatio="none"> <!-- width и/или height можно задать в процентах -->
  <polygon fill="red" points="0,0 2,0 1,2"/>
</svg>