Мне очень понравилась эта статья, где рассказывается, как можно «нарисовать» всевозможные треугольники средствами одного только CSS, без участия преобразований, а всего лишь манипулируя рамками. Вроде бы простое решение, но мне в голову никогда не приходило.



Суть отрисовки проста: берем пустой блок, назначаем ему прозрачную рамку большой толщины, одну из частей рамки делаем непрозрачной, и вуаля — получаем на выходе цветной треугольник, потому что стороны в рамках CSS соприкасаются между собой под углом 45°.



Итак, пусть задан блок с классом triangle.



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

.triangle {
    width: 0;
    height: 0;
    border: 10px solid transparent;
}


Манипуляции с рамкой производим, добавляя свойства в CSS-определение класса triangle.


border-top-color: teal;
 
border-left-color: maroon;
 
border-bottom-color: teal;
 
border-right-color: maroon;
 
border-color: teal transparent;
 
border-color: transparent maroon;
 
border-top-color: blue;
border-left-color: blue;
 
border-top-color: blue;
border-right-color: blue;
 
border-bottom-color: blue;
border-left-color: blue;
 
border-bottom-color: blue;
border-right-color: blue;
 
border-color: purple;
 
border-color: purple;
border-radius: 50%;
 
border-color: black red;
 
border-color: red transparent red red;
border-radius: 50%;