Как сделать нестандартную форма блока?

#css

Как можно сделать такую форму с помощью CSS? 

    

Ответы

Ответ 1

Если это элемент дизайна, то есть минимум 2 простых способа:


transform: skewX(-20deg);
background-image: linear-gradient(-20deg, grey 90%, transparent 90%);


Если в блоке планируется текст со скошенным правым выравниванием, то вам нужно использовать
shapes. Но методика экспериментальная, мало каким браузерами поддерживается. Вот статья
на эту тему http://frontender.info/css-shapes/


Ответ 2

Один пример на shapes второй на svg



.a {
  width: 300px;
  height: 200px;
  background: red;
  -webkit-clip-path: polygon(0 0, 100% 0, 71% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 71% 100%, 0% 100%);
  margin: auto;
}
.b {
  width: 300px;
  height: 200px;
  margin: auto;
}
shapes





svg

  




Внизу (в розовом) ссылка на инструкции


   https://css-tricks.com/working-with-shapes-in-web-design/