0

Приветствую! Подскажите, как нарисовать такую фигуру кольцо с помощью стилей (т.е. основной упор на прозрачную окантовку, а после нее на границу того же фона)?

.product-category {
    width: 70px;
    height: 70px;
    margin: 0 20px;
    text-align: center;
    background-color: orange;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  display:block;
  line-height:60px;
}
<a class="product-category" href="#">Иконка</a>

Если делать с помощью тени, то получаем вот такой неприятный эффект: неприятный эффект

2
  • сделайте просто элемент в элементе с паддингом
    – etki
    28 авг 2015 в 14:39
  • @Etki с прозрачным паддингом? не понимаю вас промежутки должны быть прозрачными, если что
    – Вася
    28 авг 2015 в 14:46

2 ответа 2

1

Вложите его в круг:

.blue {
    background-color: #00f;
}

.border {
    border: 0;
    display: block;
}

.border {
    border: 4px solid transparent;
    background-color: #0f0; /* или закоментить */
    display: block;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 80px; height: 80px;
}

.border:hover {
    border: 4px solid orange;
    background-color: transparent;
}

.border .product-category {
    background-color: #0f0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display:block;
    line-height:60px;
    margin: 5px 0 0 5px;
    text-align: center;
    width: 70px; height: 70px;
}

.border:hover .product-category {
    background-color: orange;
}
<div class="blue">
    <span class="border">
        <a class="product-category" href="#">Иконка</a>
    </span>
</div>

4
  • отличный. Но, если вы не против - еще 1 нюанс. А если такой эффект появляется по ховеру, т.е. изначально кружок зеленый, а трансформируется в оранжевый с кольцом - как тогда быть?
    – Вася
    28 авг 2015 в 15:10
  • Добавить анимацию на ховер, которая меняет цвет и увеличивает паддинг
    – etki
    28 авг 2015 в 15:14
  • 1
    @Вася Добавил в код ответа :hover. 28 авг 2015 в 15:31
  • @Дмитрий спасибо, но оказывается у меня еще 1 фигня есть: .product-category {} - это элемент таблицы - прилипает к верхнему левому углу блока и на него марджины не действуют, и так тоже не.. ` display: table-cell; border-spacing: 5px;`
    – Вася
    28 авг 2015 в 16:12
1

Вариант, добавить:

box-shadow: inset 0 0 100px 100px orange, 0 0 0px 5px orange;
border: 5px solid transparent;

При этом убрать background-color. Прозрачный border разделит тень и внутреннюю тень, которая со своими значениями выступает в качестве фона элемента.

8
  • задумка красивая! но, этот эффект мне нужен для ховер эффекта. а йвет круга уже изначально с background-color
    – Вася
    28 авг 2015 в 15:16
  • 1
    А задать элементу изначально вместо цвета фона внутреннюю тень нет возможности? Смотрится неплохо: jsfiddle.net/hu4vzzw6
    – Plikard
    28 авг 2015 в 15:18
  • возможность есть, но появляется принеприятнейшая тонкая обводочка вокруг элемента..
    – Вася
    28 авг 2015 в 15:24
  • Так эта окантовка - граница между двумя тенями. Там же должен быть прозрачный border
    – Plikard
    28 авг 2015 в 15:35
  • проблема в том, что изначально цвет болотный и круг не должен увеличиваться в размерах, из-за чего возникает лаг, который я вверху показал на картинке
    – Вася
    28 авг 2015 в 15:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.