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

224

29 января 2018, 04:39

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

Answer 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; 
}

<div class="item"> 
 
  <div class="items"></div> 
  <div class="overlay"></div> 
 
</div>

Answer 2

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

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

<svg viewBox="0 0 40 20"> 
  <path 
    d="M10,10 
       A40,40 0 0 0 30,10" 
    fill="none" 
    stroke="black" 
    stroke-width="2" 
    stroke-linecap="round" 
  ></path> 
</svg>

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

<svg> будет содержать только один <path>
<path> будет иметь обводку чёрного цвета некоторой толщины, со свойством stroke-linecap равным "round", что как раз делает закругления по краям
Часть окружности будет рисоваться с помощью дуги:
- M10,10 — переходим в точку (10,10)
- A40,40 0 0 0 30,10 — рисуем сектор круга от текущей точки до точки (30,10), с радиусом равным 40