Подскажите, пожалуйста способ "нарисовать" на чистом 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;
}
Комментариев нет:
Отправить комментарий