Задать вопрос

Василь Бойко @ferdasfarmazone

Верстальщик!

html

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

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

Пример №1

Пример №2

Пример №3

Вопрос задан более трёх лет назад
254 просмотра

Комментировать

Подписаться 2 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 3

LenovoId

Максим @LenovoId

svg, css,js

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

Ответ написан более трёх лет назад

2 комментария

2 комментария

Василь Бойко @ferdasfarmazone Автор вопроса

и как же?
вот есть код Примера №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>

Написано более трёх лет назад

Максим @LenovoId

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

Написано более трёх лет назад

jamster @jamster

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

Ответ написан более трёх лет назад

3 комментария

3 комментария

Василь Бойко @ferdasfarmazone Автор вопроса

и как же?
вот есть код Примера №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 @jamster

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

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

Написано более трёх лет назад
Василь Бойко @ferdasfarmazone Автор вопроса

jamster, спасибо

Написано более трёх лет назад

Владислав @vos_50

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

Ответ написан более трёх лет назад

Комментировать

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

HTML

Простой
С чем может быть связано не правильный вывод изображений?
- 1 подписчик
- 50 минут назад
- 10 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 4 часа назад
- 82 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 5 часов назад
- 41 просмотр
1

ответ
HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- 5 часов назад
- 115 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 9 часов назад
- 96 просмотров
2

ответа
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- вчера
- 51 просмотр
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- вчера
- 59 просмотров
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- вчера
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 85 просмотров
2

ответа
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Доработать сайт на CS-Cart (статусы товаров и цены)

25 апр. 2024, в 16:56

5000 руб./за проект

Внесение правок в мобильное приложение (Android)

25 апр. 2024, в 16:54

3000 руб./за проект

Motion дизайн для гиф

25 апр. 2024, в 16:38

12000 руб./за проект