Как верстать такие элементы?

Question

[Василь Бойко]

Картинками?)
Или есть более изящный способ?

Пример №1

Пример №2

Пример №3

Answer 1

[Максим]

На SVG - это делается ...

Comments

[Василь Бойко]

и как же?
вот есть код Примера №1

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="517px" height="518px">
<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
 d="M507.111,517.016 C507.111,517.016 383.086,517.016 264.213,517.016 C141.849,517.016 9.889,517.016 9.889,517.016 C4.427,517.016 -0.000,512.762 -0.000,507.516 L-0.000,10.075 C-0.000,4.828 4.427,0.577 9.889,0.577 L224.558,0.577 C229.205,11.106 243.126,18.750 259.578,18.750 C276.030,18.750 289.952,11.106 294.598,0.577 L507.111,0.577 C512.573,0.577 517.000,4.828 517.000,10.075 L517.000,507.516 C517.000,512.762 512.573,517.016 507.111,517.016 Z"/>
</svg>

[Максим]

Василь Бойко, https://codepen.io/topicstarter/pen/bJrvQo вот я эти кругляшки сделал с 4х сторон

Answer 2

[jamster]

Юзайте SVG теги https://svgontheweb.com/ru/

Comments

[Василь Бойко]

и как же?
вот есть код Примера №1

<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="517px" height="518px">
<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
 d="M507.111,517.016 C507.111,517.016 383.086,517.016 264.213,517.016 C141.849,517.016 9.889,517.016 9.889,517.016 C4.427,517.016 -0.000,512.762 -0.000,507.516 L-0.000,10.075 C-0.000,4.828 4.427,0.577 9.889,0.577 L224.558,0.577 C229.205,11.106 243.126,18.750 259.578,18.750 C276.030,18.750 289.952,11.106 294.598,0.577 L507.111,0.577 C512.573,0.577 517.000,4.828 517.000,10.075 L517.000,507.516 C517.000,512.762 512.573,517.016 507.111,517.016 Z"/>
</svg>

[jamster]

Василь Бойко, https://developer.mozilla.org/ru/docs/Web/SVG/Tuto...
css.yoksel.ru/svg-fill-and-stroke

Очень быстро не получится, удачи в обучении)

[Василь Бойко]

jamster, спасибо

Answer 3

[Владислав]

Вот пример на чистом css , местоположение скругления думаю сами разберетесь как указать