Как нарисовать нестандартную фигуру?

Question

[Dmitry]

Нужно разместить в центре страницы фигуру - 4 круга на одинаковом расстоянии друг от друга, причём два из них соединяются перемычкой, наподобие песочных часов. Прототип вот. Перемычка должна быть не прямой, а вогнутой с двух сторон.

Comments

[Антон Иванов]

Для рисования фигур используйте svg.

[Маркус Кейн]

В чем проблема открыть исходный код той же страницы с прототипом и изучить как это сделано, а потом попробовать сделать так же самому?

[VoidVolker]

Dmitry https://qna.habr.com/help/rules#5.12

[Ankhena]

Что-то...

Круги рисуются чем угодно, градиентами, svg, бордер-радиусами...
Перемычка svg или те же псевдики с градиентами.

Что именно у вас не получилось?

Вот тут в конце статьи есть пример с перемычкой https://sitist.ru/magic-border-radius.html

[Hovhannes Varosyan]

Маркус Кейн, хотят готовы код))

Answer 1

[VoidVolker]

Открыть любой графический редактор, нарисовать желаемое и разместить на вашей странице.

Answer 2

[UniInter]

Примерно так:

<style>
    body {
        margin: 0;
        min-height: 100vh;
        position: relative;
    }
    .krug {
        width:100px; height:100px;
        background-color:#99F;
        border-radius:50%;
        margin:10px;
    }
    .cont-in {
        display:inline-block;
    }
    .cent {
        width:150px; height:50px;
        background-color:#99F;
        transform:rotate(-45deg);
        position:absolute;
        top:90px; left:50px;
        display:inline-block;
    }
.cont-out {
        width: 260px; height: 260px;
        position: absolute;
        left: 0; top: 0;
        right: 0; bottom: 0;
        margin: auto;
}
</style>
<div class="cont-out">
    <div class="cont-in">
        <div class="krug"></div>
        <div class="krug"></div>
    </div>
    <div class="cont-in">
        <div class="krug"></div>
        <div class="krug"></div>
    </div>
    <div class="cent"></div>
</div>