Геометрические фигуры на CSS

вторник, 29 сентября 2015

06:31

Mouse-k

❖ Мышка-программышка в стране Информатике ❖ Друг — это тот, кто тебя знает, но всё равно любит

Мне очень понравилась эта статья, где рассказывается, как можно «нарисовать» всевозможные треугольники средствами одного только 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%;