Как грамотно сверстать такой элемент

#html #css #svg

Сложность вызвало именно вот это скругление, которое я указал на скриншоте. 

Абсолютно спозиционировать png или есть другое решение? 
    

Ответы

Ответ 1

Например:



* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.s-1 {
  background: #2e3b4e;
  height: 200px;
}

.s-2 {
  height: 200px;
  background: #c35369 url(https://images.unsplash.com/photo-1503455637927-730bce8583c0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7443420d1a52cdfe9f29d7e9f83a7796&auto=format&fit=crop&w=600&q=60)
center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.separate svg {
  display: block;
  margin: auto;
  margin-top: -12px;
  margin-bottom: -22px;
}

.separate svg path{
  fill:#2e3b4e;
}


  

  
    

  






M - начальная точка, X,Y;
C - кривая, X1,Y1 X2,Y2 X,Y;
S - сглаживание X2,Y2 X,Y;
z - замыкаем контур;


Подробнее об svg path:


yoksel
css-tricks


P.S: Этот пример svg взят с просторов сети, Вы же можете его сами нарисовать в редакторе
(Illustrator) или так подкорректировать координаты.

Вот свой "язык" получилось сделать:






Ответ 2

img {
  display: block;
  width: 100%;
}

.foo {
  position: relative;
  display: block;
  width: 60px;
  height: 30px;
  margin-left: 50%;
  left: -30px;
  border-radius: 0 0 30px 30px;
  background: #c5566c;
}

.foo__left,
.foo__right {
  position: absolute;
  display: block;
  height: 15px;
  width: 15px;
  background: #c5566c;
}

.foo__left {
  left: -13px;
}

.foo__right {
  right: -13px
}

.foo__left:after,
.foo__right:after,
.foo__left:before,
.foo__right:before {
  content: '';
  position: absolute;
  z-index: 2;
  display: block;
  height: 15px;
  width: 15px;
  background: #fff;
}

.foo__left:before,
.foo__left:after {
  border-radius: 0 15px 0 0;
}

.foo__right:before,
.foo__right:after {
  border-radius: 15px 0 0 0;
}

.foo__right:after {
  top: 1px;
  right: 1px;
}

.foo__left:after {
  top: 2px;
  left: 1px;
}