@persovt

Как сделать такую штуку?

5f2c2c46ca1f7584341882.png
Помогите сделать такую штуку, где "01/04". Странная и не понятная форма, как делать, пытался сделать на "border", но не получилось из-за неаккуратности данного метода (неровный переход). Ну или хотя бы не сделать, а просто подсказку, какими методами это можно сделать
  • Вопрос задан
  • 561 просмотр
Решения вопроса 2
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
Вариантов в целом много. Если пойти по пути псевдоэлементов с абсолютным позиционированием и аккуратного выравнивания, то получится что-то такое:
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Создаём три блока. Боковым блокам с надписями previous project и next project добавляем срезы с помощью Clip-Path. Центральный блок в принципе можно сделать с помощью border у центрального блока + добавить псевдоэлемент(ы) и довести до аккуратного вида. Или так же сделать эту фигурку средствами Clip-Path или SVG, но мне кажется можно обойтись и без этого.
Ответ написан
firedragon
@firedragon
Senior .NET developer
круг с z-index: 2
прямоугольник z-index: 3 в нем число
Все остальное css
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы