Совет о том, как создать эту форму кнопки

Чтобы создать впечатление 3D-плоскости, вращающейся в сторону от точки зрения, например Star Wars сканирование (воссоздано также и в svg), используйте (с префиксом) perspective и rotate3d (или rotateX).

Чтобы предотвратить наложение, используйте прозрачный контур толщиной 1 пиксель, как описано здесь.

Пример выполнения

#trapezoid {
    -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
       -moz-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
         -o-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
        -ms-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
            transform : perspective(400px) rotate3d(1, 0, 0, 20deg);

        border-radius : 5px 5px 0 0;
              outline : 1px solid transparent;
}

Если вместо этого вы не хотите, чтобы текст вращался, примените приведенный выше код к псевдоэлементу ::before, абсолютно расположенному относительно его родителя:

Выполнение примера с не повернутым текстом

Код:

#trapezoid {    
         width : 200px;
        height : 50px;
        margin : 10px;
       padding : 10px;
      position : relative;
    text-align : center;
}

#trapezoid::before {
    -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
       -moz-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
         -o-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
        -ms-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
            transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
              outline : 1px solid transparent;
        border-radius : 5px 5px 0 0;
             position : absolute;
                  top : 0;
               bottom : 0;
                 left : 0;
                right : 0;
              content : '';
              z-index : -1;
           background : red;
}

Взято с здесь

Вы можете создать эту форму, используя это:

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

Вот пример

Если вам нужен текст, поместите текст в div и добавьте в css это:

text-align:center;
line-height:30px; /*Size of bottom border*/

Однако вам нужно будет немного повозиться, чтобы получить правильную ширину и высоту и т. Д.

ОБНОВЛЕННЫЙ ПРИМЕР

Вы можете достичь этого стиля, используя :before и :after. Хитрость заключается в том, чтобы наклонить элементы по бокам и применить небольшой радиус границы для плавного закругления, например:

button {
  border: 0 none;
  background-color: red;
  position: relative;

  font-size: 4em;
  margin-left: 100px; 
}

button:before,
button:after {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  bottom: 0;
  width: 1em;
  z-index: -1;
}

button:before {
  left: -0.5em;
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
  border-top-left-radius: 10%;
}

button:after {
  left: auto;
  right: -0.5em;
  -webkit-transform: skew(10deg);
  transform: skew(10deg);
  border-top-right-radius: 10%;
}

Скрипка здесь: http://jsfiddle.net/JyhwZ/1/