Задать вопрос
@kaidos
html

Как сделать круглые (как на картинке) элементы между блоками?

Мне нужно сделать вот такие круглые элементы между блоками

oDT7mG8KZt4.jpg?size=1920x1080&quality=96&sign=48b82f21a5d9ab121568f45632c0023e&type=album

У меня сейчас вот так

PLAnaJ8fYqY.jpg?size=1920x1080&quality=96&sign=d464e9c8fdafb01dee54f0d4d1f592a2&type=album

Ссылка на JSFiddle
  • Вопрос задан
  • 96 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 3
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Здесь речь идет про лендинг. Неизменяемый контент упрощает вопрос. Можно взять псевдоэлементы у блоков с картинками и использовать их в качестве точек путем старого доброго абсолютного позиционирования их в пространстве:



Использование именно псевдоэлементов позволит сохранить сам HTML более чистым (в соседнем ответе предлагается похожий вариант, но с использованием отдельных тегов в разметке). Также можно использовать фоны, например для основного контейнера сделать фон, состоящий из нескольких небольших радиальных градиентов - получится то же самое по сути.

Самое главное здесь - подумать об адаптивности и аккуратно прибрать все лишнее на маленьких экранах.
Ответ написан
Комментировать
Комментировать
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
экспортируйте в Png с прозрачностью.
экспортируйте в jpeg и задайте бордер.

потом установите бэкгроундом в случае jpeg добавьте border-radius

.work_item{
  width: 279px;
  height: 205px;
  border-radius: 30px;
  background-color: #3DDABE;
  margin: 0.5em;
  background-image: url('https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png');
  background-size: cover;
}
Ответ написан
Комментировать
Комментировать
@ikoit
Web Developer
Ещё как вариант, слепил на скорую руку, поэтому получилось кастыльно...
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapp {
            width: 1166px;
            max-width: 100%;
            padding: 0 10px;
            margin: 0 auto;
        }
        
        .work_wrap {
            display: grid;
            grid-template-columns: repeat(4, auto);
            grid-gap: 10px 10px;
            justify-content: space-between;
            margin-top: 50px;
            list-style: none;
        }
        
        .work_item {
            margin-top: -28px;
            width: 279px;
            height: 205px;
            border-radius: 30px;
            background-color: #3DDABE;
        }
        
        .work_item-mark {
            position: relative;
            top: -14px;
            left: -13px;
            width: 15px;
            height: 15px;
            border-radius: 20px;
            background: #3DDABE;
        }
        
        .work_wrap li:nth-child(5) {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="wrapp">

        <ul class="work_wrap">
            <li class="work_item"></li>
            <li class="work_item"></li>
            <li class="work_item"></li>
            <li class="work_item"></li>
            <li class="work_item-mark"></li>
            <li class="work_item-mark"></li>
            <li class="work_item-mark"></li>
            <li class="work_item-mark"></li>
            <li class="work_item"></li>
            <li class="work_item"></li>
            <li class="work_item"></li>
            <li class="work_item"></li>
        </ul>

    </div>

</body>

</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн интерфейса веб-приложения
24 нояб. 2024, в 14:37
3000 руб./в час
Обновить дизайн карты метро Москвы
24 нояб. 2024, в 13:04
500 руб./в час
Сделать сайт на Tilda
24 нояб. 2024, в 12:29
3000 руб./за проект
Ещё заказы