Страницы

Поиск по вопросам

пятница, 9 ноября 2018 г.

Нарисовать кривую на CSS?

Подскажите, пожалуйста способ "нарисовать" на чистом CSS максимально похожую кривую с закругленными углами, как на рисунке ниже. Я пробовал через border-radius и обрезать круг через overflow: hidden но пока результат не устраивает меня.


Ответ

Это жесть - но получилось - надо доработать , смотрите ... Создаём один огромный блок , в моём случае это 500px на 500px, и что бы с эмитировать border ставим блок выше на 20px меньше в диаметре, но точно по центрам обоих... то есть другими словами белый перекрывает чёрный, и мы видим только чёрную полосу, делаем border-radius и вгоняем это весь трешь в угол родителя у которого overflow:hidden и так мы можем двигать этот блок куда угодно и подставлять куда угодно .. так же можем в ручном режиме его изменять... нужен js что бы это дело как автоматизировать...
Собственно демо на "лицо"
.items { width: 500px; height: 500px; border-radius: 1000px; border: 20px solid #000; border-top: 20px solid transparent; border-right: 20px solid transparent; border-left: 20px solid transparent; } .overlay { width: 460px; height: 460px; background: #fff; } .items, .overlay { position: absolute; top: -700px; left: -260px; transform: translate(50%, 50%); } .items:after { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; background: #000; position: absolute; bottom: 55px; right: 55px; z-index: ; } .items:before { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; background: #000; position: absolute; bottom: 55px; left: 55px; z-index: ; } .item { width: 500px; height: 140px; position: relative; margin: 20px; overflow: hidden; }


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

Отправить комментарий