Помогите дорисовать сердце на css

Тема в разделе "Верстка", создана пользователем verfaa, 28 фев 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Приветствую всех.
    На страничке http://www.css3shapes.com/ в самом низу есть сердце, реализованное на чистом css.
    Я хотел бы немного дополнить его и получить вот такое сердце на чистом css
    http://www.iconarchive.com/show/handstitch-social-icons-by-designbolts/Weheartit-icon.html

    Скажите, возможно реализовать на css подобное? если кто-то может, сделайте пожалуйста
     
  2. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    724
    Симпатии:
    314
    Последнее редактирование: 28 фев 2014
    verfaa, Denis_Pi и latteo нравится это.
  3. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    Вот так с рамочкой http://jsfiddle.net/5Y84t/5/ - Углы у пунктира рамки вы не скруглите...
     
    latteo и verfaa нравится это.
  4. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    А такой вариант? Варварство конечно... по трудозатратам, но работает.
    Ну и от меня 2 вариантика...
    1. Как раз то сердечко с сосисками которые Вам нужны. :)
    http://codepen.io/Solus_Rex/pen/LAaBg
    Этот вариант 5кб.
    2. Это как-бы и не решение вовсе, т.к. оно из условий вываливается. Но в нём не идёт дополнительного обращения к базе данных, а значит может пригодиться...
    http://codepen.io/Solus_Rex/pen/BmJIL
    Этот тяжелее - 14кб, но учитывая, что исходная картинка весила 26кб, уже хорошо.
    + Трудоёмкость на порядок меньшая. Я на первый вариант минут 30 угрохал.
    Вот.
    Удачи.
     
    dmitry_shirin, latteo и verfaa нравится это.
  5. Relaxbond

    Relaxbond Создатель

    Регистр.:
    28 май 2013
    Сообщения:
    19
    Симпатии:
    7
    <div class="heart"></div>
    Код:
    #heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    #heart:before,
    #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: #4880C5;
        -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: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%;
    }