n-wp.ru — блог о WordPress

Несколько примеров работы с CSS: простые геометрические фигуры

Активно развиваясь в последнее время и внедряясь в браузеры, правила визуального оформления HTML-кода CSS3 предлагают более простые варианты для создания геометрических фигур. Если раньше нужно было выдумывать целые конструкции из кодов, или же прибегать к помощи java-скриптов, то сейчас оформление стало намного проще и доступнее силами только CSS-разметки. Предлагаю несколько примеров создания простых геометрических фигур средствами только CSS.

Круг

Овал

Квадрат

Прямоугольник

Треугольник

Перевернутый треугольник

Треугольник направо

Треугольник налево

Левый верхний угол

Правый верхний угол

Левый нижний угол

Правый нижний угол

Трапеция

Параллелограмм

Эти коды работают в браузерах Internet Explorer 9, Firefox 6, Opera 11, Google Chrome 13, Safari 5.

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

2 комментария

  • А можно ещё сердечко зафигачить:
    [cc lang=»css»].heart {
    position: relative;
    float: left;
    width: 17px;
    height: 15px;
    margin-right: 5px;
    }
    .heart:before,
    .heart:after {
    position: absolute;
    content: «»;
    left: 9px;
    top: 0;
    width: 9px;
    height: 15px;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    }
    .heart:before,
    .heart:after {
    background: #D3E2F0;
    }
    .heart.passive:before,
    .heart.passive:after {
    background: #ccc;
    }
    .heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
    }
    .heart a {
    width: 17px;
    height: 15px;
    display: inline-block;
    z-index: 2;
    position: relative;
    }