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

#css #css3 #вёрстка #svg #рисование

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


    

Ответы

Ответ 1

Это жесть - но получилось - надо доработать , смотрите ...
Создаём один огромный блок , в моём случае это 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;
}


  

  





Ответ 2

Не знаю, подходит ли вариант на svg (думаю, что не подходит), но я его приведу:



svg {
  width: 400px;
  height: 200px;
}





Не знаю, нужны ли какие-нибудь объяснения, но на всякий случай вот они: