Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
Марина
@Marina666
Создаю сайты
HTML
CSS
Как правильно сверстать такой блок?
Как правильно сверстать такой блок и написать стили?
Красный блок по центру, а зеленые расположены по кругу.
snippet
Вопрос задан
более года назад
187 просмотров
5
комментариев
Подписаться
1
Простой
5
комментариев
Facebook
Вконтакте
Twitter
Ivan Ustûžanin
@IvanU7n
если прямо совсем по кругу, то относительно недавно появившаяся в css тригонометрия
Написано
более года назад
Марина
@Marina666
Автор вопроса
IvanU7n
,
Нужно, чтобы поддержка была браузерами.
Я вижу вариант только position: relative и position: absolute, но думаю есть более правильное решение
Написано
более года назад
Ivan Ustûžanin
@IvanU7n
Марина
, а количество зелёных фиксированное? если да, то должна помочь небольшая магия с grid: 3 столбца и 7 строк с последующим разложением блоков по этой сетке
Написано
более года назад
Марина
@Marina666
Автор вопроса
IvanU7n
,
Да, фиксируемое. Зеленых 6, а красный 1
Проблема, что html разметка должна быть такой
snippet
Написано
более года назад
Ankhena
@Ankhena
Куратор тега CSS
Марина
, по аналогии:
snippet
https://jsfiddle.net/Ankhena/z516pbms/
Написано
более года назад
Решения вопроса
1
Ivan Ustûžanin
@IvanU7n
nothing interesting here
snippet
Ответ написан
более года назад
3
комментария
Нравится
2
3
комментария
Facebook
Вконтакте
Twitter
Kentavr16
@Kentavr16
Хорошее решение.
Написано
более года назад
Ivan Ustûžanin
@IvanU7n
Kentavr16
, иногда дизайнеры всякое рисуют, так что извращенства с гридами можно сказать мой конёк )
Написано
более года назад
Kentavr16
@Kentavr16
IvanU7n
, мне на ум пришло только transform rotate, так что рад что есть у кого поучиться.
Написано
более года назад
Пригласить эксперта
Ответы на вопрос
1
Максим
@LenovoId
svg, css,js
snippet
Ответ написан
более года назад
Комментировать
Нравится
Комментировать
Facebook
Вконтакте
Twitter
Ваш ответ на вопрос
Войдите, чтобы написать ответ
Войти через центр авторизации
Похожие вопросы
HTML
Простой
Как сделать на сайте цитаты, как в Telegram?
2 подписчика
час назад
16 просмотров
1
ответ
PHP
+1 ещё
Простой
Как получить id от button?
1 подписчик
4 часа назад
43 просмотра
0
ответов
CSS
Простой
Растягиваются колонки таблицы, при table { width: 100%} и col: { width: 200px }, как исправить это поведение?
1 подписчик
16 часов назад
67 просмотров
2
ответа
HTML
+1 ещё
Средний
Форма ввода с использованием ajax. Не работает на сайте, как исправить?
1 подписчик
вчера
50 просмотров
0
ответов
CSS
Простой
Почему не центрируется текст?
1 подписчик
вчера
123 просмотра
2
ответа
CSS
Простой
Vite при сборке проекта Laravel + React искажает CSS свойства, как решить?
1 подписчик
30 мар.
173 просмотра
0
ответов
JavaScript
+3 ещё
Простой
Как реализовать обновление цены?
1 подписчик
29 мар.
145 просмотров
0
ответов
HTML
+1 ещё
Простой
Почему видеофайл не доступен напрямую в браузере?
1 подписчик
29 мар.
132 просмотра
3
ответа
HTML
+1 ещё
Простой
Как наложить на фон ещё объекты с текстом внутри?
1 подписчик
27 мар.
130 просмотров
0
ответов
HTML
+2 ещё
Простой
Как просмотреть скрытый sitemap.xml?
1 подписчик
27 мар.
135 просмотров
2
ответа
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
Специалист технической поддержки ИТ продукта
inSales
от 60 000 ₽
Парсер для сайта
Rotormine
от 10 000 до 100 000 ₽
JavaScript веб-разработчик (Backend)
TurboProject
от 60 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама