06:31 

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

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%;

@темы: Мелочи под рукой, Color, CSS, Border

URL
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Не будите спящего программиста

главная