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

Question

我需要制作这个按钮：

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

- michaeluskov

---

为什么按钮不能使用 :before？这样行不行？ - Arun AK

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>

- Mukesh Ram

---

我印象深刻。对于这样的按钮，我甚至不会尝试纯CSS解决方案。我会直接使用SVG，因为我无法想象CSS解决方案能够像你在这里实现的那样达到圆角的一致性。恭喜！ - zJorge

太棒了！它运行得非常好，我认为添加 outline: none; 也是一个不错的选择。 - Mohammad Kermani

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

希望这有所帮助 :)

- Arun AK

---

您还可以将 scaleX（0.6） 添加到 transform 属性中，以适应箭头的角度。 - felixyadomi

@Thinker，是的，我写过我通常使用它，但角度是正确的。 - michaeluskov

@FelixYadomi 问题在于渐变，渐变不会与“button”的渐变相同。 - michaeluskov

@FelixYadomi，无法抑制地将您的想法添加到代码片段中 :-) - vals