Как лучше реализовать такой элемент через css?

Question

[GrimJack]

На прошлом сайте этот элемент вставлен картинкой (считаю не круто), хочу переделать его через css.
В нем выводится текст, но блок всегда ш*в 130*130px.
Разметка следующая:

<li class="active">
     <a href="#">СЛОВО</a>
</li>

Круг реализовал так:

li.active {
    margin-top: -53px;
    background: linear-gradient(25deg, #93398d 50%, #9d3a99 50%);
    width: 120px;
    padding-top: 53px;
    padding-bottom: 53px;
    border-radius: 120px;
}

Рамки можно сделать через after и before
Но есть проблемы из-за пэддингов.
Как можно реализовать эти рамки?

Answer 1

[Сергей Горячев]

https://jsfiddle.net/meyjjmug/
Вообще не понимаю, в чем сложность и зачем псевдоэлементы.

Если на заднем фоне полукруг, то тогда можно через after его поставить, чтобы тень не перекрывать.
https://jsfiddle.net/cbzywb1m/

Comments

[GrimJack]

Огромное спасибо, выручили

[Сергей Соколов]

Проали детали: заливка внутреннего круга не сплошная – там два цвета; полукруг с наклоном; 8-гранник.

[Сергей Горячев]

Сергей Соколов: https://jsfiddle.net/cbzywb1m/ вот вторая версия.

[Сергей Горячев]

Сергей Соколов: А восьмигранник, чесслово, мне кажется, это криво вырезано %) Ибо никак он сюда не катит.

[GrimJack]

Sergey Goryachev, подскажите, почему при всем том же, но если как hover, то все съеживается? Код не менял, только добавил hover
Или лучше через js ставить ему класс active (элементу на который навелся)

[GrimJack]

аа это из-за фиксированной ширины ul

[GrimJack]

Sergey Goryachev: не могли бы, пожалуйста, подсказать, как еще реализовать корректно, что-бы при наведении элементы не ломали все и не было артефакта в момент наведения? Вот залил исходник isla.qbmall.ru

[GrimJack]

Вот такая беда при неполном наведении на сам текст

[Сергей Горячев]

Михаил Шпаков: код в песочницу, там посмотрим. просто так гадать нет смысла.

[GrimJack]

Sergey Goryachev с песочницей не очень гладко, вот тут "конечный" проект там можно увидеть проблему меню с шириной

Answer 2

[Владислав Поляков]

SVG маска ?

Answer 3

[Сергей Соколов]

Запихнуть картинку в data-uri? (fiddle)

Comments

[Сергей Горячев]

Картинка в BASE64, это все равно картинка, как не крути.