Готовое решение не прошу :) как минимум на чем лучше это сделать canvas или svg(или более подходящий вариант)
это то что у вас на скрине в случае если в сниппете не корректно отобразится
.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;" />
</
Можно двумя радиальными градиентами
*{
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;
<div class="card">
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Пытаюсь сделать карточку которая переворачивается при наведении на desktop и при нажатии на ipad и др
На сайте 2 формы + много форм в модальных окнах на втором экранеФормы которые на сайте работают как нужно, а в модальных окнах кнопка отправки...