Как сверстать изогнутую линию?

226

26 декабря 2018, 05:30

Готовое решение не прошу :) как минимум на чем лучше это сделать canvas или svg(или более подходящий вариант)

Answer 1

это то что у вас на скрине в случае если в сниппете не корректно отобразится

.items { 
  text-align: center; 
  max-width: 480px; 
  border: 1px solid #ccc; 
  display: table; 
  margin: auto; 
  background: #fbfbfb; 
} 
 
ul { 
  display: block; 
  max-width: 360px; 
  text-align: left; 
  list-style: circle; 
  font-size: 16px; 
  margin: 30px auto; 
  font-weight: 900; 
} 
 
.ico { 
  border: 1px solid blue; 
  display: inline-block; 
  padding: 10px; 
  border-radius: 50%; 
  vertical-align: middle; 
  transform: scale(.6); 
} 
 
.ico div { 
  width: 14px; 
  height: 14px; 
  border-right: 2px solid blue; 
  border-bottom: 2px solid blue; 
  transform: rotate(45deg)translateY(-1px)translatex(-2px); 
}

<div class="items"> 
  <div class="item"> 
    <img src="http://enciklopediya-tehniki.ru/images/idoblog/upload/92/steril_24.png" width="360px" alt=""> 
  </div> 
  <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 314 69"> 
 
 
  <g 
     transform="translate(-1.3,-227.2)"> 
    <path 
       d="M 3.023821,295.48809 C 103.37996,270.41292 206.08908,254.16145 314.47619,259.20238 l -1.5119,-31.75 C 203.78198,275.16696 100.62384,269.86897 1.511911,228.96429 Z" 
       style="fill:#00d6d6;" /> 
    </svg> 
  <div> 
    <ul> 
      <li>Автоклавов - паровой стилизатор</li> 
      <li>Используется для стирилизации инструментов</li> 
    </ul> 
  </div> 
 
  <div class="ico"> 
    <div></div> 
  </div> 
  <span> раскрыть подробнее</span> 
</div>

Inkscape вот такую штуку сгенерировал - сама кривая

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 314 69"> 
 
 
  <g 
     transform="translate(-1.3,-227.2)"> 
    <path 
       d="M 3.023821,295.48809 C 103.37996,270.41292 206.08908,254.16145 314.47619,259.20238 l -1.5119,-31.75 C 203.78198,275.16696 100.62384,269.86897 1.511911,228.96429 Z" 
       style="fill:#00d6d6;" /> 
  </

Answer 2

Можно двумя радиальными градиентами

*{ 
  box-sizing:border-box; 
} 
.card{ 
  border:1px solid; 
  width:300px; 
  height:300px; 
  background: radial-gradient(circle at center -200px, #fff 300px,transparent 301px), 
              radial-gradient(circle at 75% 604px, #fff 500px,transparent 501px), 
			        #cda;