Кнопка со стрелкой с вертикальным фоном

Мне нужно сделать эту кнопку:

Обычно, когда мне нужно сделать стрелку с градиентом и границей, я добавляю элемент .button:before с абсолютным позиционированием, используя transform: rotate(-45deg) translate(%SOMETHING%); и добавляя background: linear-gradient(45deg, %COLORS%);. Но теперь мне нужно сделать кнопку, угол стрелки которой не прав. Как я могу это сделать?

Ответ 1

Вы можете создать эту кнопку с помощью селектора :before:

.button {
   width: 120px;
   height: 50px;   
   position: relative;
   -moz-border-radius:    5px;
   -webkit-border-radius: 5px;
   border-radius:         5px;
   border:1px solid #4d7a9c; 
   position:relative;
   color:white;
   font-size:18px;
   
   background: #238fe7; /* Old browsers */
  background: -moz-linear-gradient(top,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=0 ); /* IE6-9 */ 
 }

.button:before {
  content: "";
  position: absolute;
  transform: scaleX(0.6) rotate(45deg);
  height: 38px;
  width: 38px;
  right:-18px;
  top:5px;
  border-radius:  5px;
  z-index:-1px;
  
  background: #238fe7; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

<button class="button">Text</button>

Ответ 2

Вы можете сделать это следующим образом:

#trape {
  position: absolute;
  height: 50px;
  color: white;
  width: 80px;
  border:0;
  background-image: linear-gradient(0deg, red, tan);
}

#trape:before {
  content: "";
  position: absolute;
  transform: scaleX(0.6) rotate(45deg);
  height: 35px;
  width: 35px;
  right:-18px;
  top:7px;
  background-image: linear-gradient(-45deg, red, tan);
}

<button id="trape"></button>