Форма в css и отзывчивая?

Question

У меня есть эта форма:

Это образ, но мне нужно это только и отзывчивым CSS, это возможно?

Мне нужен тот же самый на картинке.

Answer 1

Существует несколько решений. Первое, что приходит на ум, строит его из нескольких дивы и с помощью перекоса(), например:

HTML:

<div class="container"> 
    <div class="top"> 
    <div class="skew-left red"></div> 
    <div class="skew-right red"></div> 
    </div> 
    <div class="bottom"> 
    <div class="skew-left red"></div> 
    <div class="skew-right red"></div> 
    </div> 
</div> 

CSS:

.container { 
    width: 300px; 
    height: 40px; 
    position: relative; 
} 

.red { 
    background: red; 
} 

.top, 
.bottom, 
.red { 
    width: 300px; 
    height: 20px; 
} 

.skew-left, 
.skew-right { 
    width: 200px; 
    height: 20px; 
} 

.top, 
.bottom { 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

.top { 
    top: 0; 
    bottom: 20px; 
} 

.bottom { 
    top: 20px; 
    bottom: 0; 
    -ms-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 

.skew-left { 
    -ms-transform: skewX(20deg); 
    -webkit-transform: skewX(20deg); 
    transform: skewX(20deg); 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

.skew-right { 
    -ms-transform: skewX(-20deg); 
    -webkit-transform: skewX(-20deg); 
    transform: skewX(-20deg); 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

JSFiddle: https://jsfiddle.net/m0mx4ykh/

Существуют и другие решения, хотя некоторые из них уже обсуждались здесь. Проверьте ссылки, которые другие вам дали в комментариях.