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

Question

我需要制作这个按钮：

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

Answer 1

你可以这样做:

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

希望对您有所帮助:)

Answer 2

您可以使用 :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>

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

Arrow button with vertical gradient background

html

css

css-transforms