html - 具有垂直渐变背景的箭头按钮

Question

我需要制作这个按钮:

通常当我需要制作带有渐变和边框的箭头按钮时，我添加具有绝对定位的 .button:before 元素，使用 transform: rotate(-45deg) translate(%SOMETHING% ); 并添加 background: linear-gradient(45deg, %COLORS%);。但是现在我需要制作按钮，其箭头 Angular 不正确。我该怎么做？

Answer 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>