如何使一个钝角的按钮？ [英] How to make a button with an obtuse angle?

问题描述

如何制作具有钝角的按钮？

我想这样发生

我来这里

我的代码 - Fiddle

  * {box-sizing：border-box ;}。btn {display：inline-block; padding：16px 30px; color：#fff; border：1px solid＃4A803C;位置：相对; border-radius：3px; background：rgb（74,168,28）; / *旧浏览器* / background：-moz-linear-gradient（top，rgba（74,168,28,1）0％，rgba（63,155,19,1）100％，rgba（56,146,12,1）100％ ; / * FF3.6-15 * /背景：-webkit-线性梯度（顶部，rgba（74,168,28,1）0％，rgba（63,155,19,1）100％，rgba（56,146,12,1） 100％）; / * Chrome10-25，Safari5.1-6 * / background：linear-gradient（to bottom，rgba（74,168,28,1）0％，rgba（63,155,19,1）100％，rgba（56,146,12， 1）100％）; / * W3C，IE10 +，FF16 +，Chrome26 +，Opera12 +，Safari7 + * / filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃4aa81c'，endColorstr ='＃38920c'，GradientType = 0）;}。 span {position：relative; z-index：1; } .btn：after {content：; width：35px; height：35px;显示：block; position：absolute; top：7px;右：-18px; border：1px solid＃4A803C; border-left：none; border-bottom：none; border-radius：3px; -webkit-transform：rotate（47deg）skew（5deg）; transform：rotate（47deg）skew（5deg）;背景图像：-moz-线性梯度（143deg，rgb（74,168,28）0％，rgb（63,155,19）100％）;背景图像：-webkit-线性梯度（143deg，rgb（74,168,28）0％，rgb（63,155,19）100％）;背景图像：-ms-线性梯度（143deg，rgb（74,168,28）0％，rgb（63,155,19）100％）;背景图像：线性梯度（143deg，rgb（74,168,28）0％，rgb（63,155,19）100％）;} btn：hover {background：rgb（56,146,12） / *旧浏览器* / background：-moz-linear-gradient（top，rgba（56,146,12,1）0％，rgba（63,155,19,1）0％，rgba（74,168,28,1）100％ ; / * FF3.6-15 * /背景：-webkit-线性梯度（top，rgba（56,146,12,1）0％，rgba（63,155,19,1）0％，rgba（74,168,28,1） 100％）; / * Chrome10-25，Safari5.1-6 * / background：linear-gradient（to bottom，rgba（56,146,12,1）0％，rgba（63,155,19,1）0％，rgba（74,168,28， 1）100％）; / * W3C，IE10 +，FF16 +，Chrome26 +，Opera12 +，Safari7 + * / filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃38920c'，endColorstr ='＃4aa81c'，GradientType = 0）;} btn：hover：之后{background-image：-moz-线性梯度（-47deg，rgb（74,168,28）0％，rgb（63,155,19）100％背景图像：-webkit-线性梯度（-47deg，rgb（74,168,28）0％，rgb（63,155,19）100％）;背景图像：-ms-线性梯度（-47deg，rgb（74,168,28）0％，rgb（63,155,19）100％）; background-image：linear-gradient（-47deg，rgb（74,168,28）0％，rgb（63,155,19）100％）;}   < a href =＃class =btn>< span>Умножительматрицы< / span>< / a>  

我会很乐意提供任何帮助。
谢谢

解决方案

一个简单的解决方案是添加一个 rotateY（Xdeg） / code>到 .btn：after 元素。这将使元素的Y轴旋转，从而使它看起来比它实际上更窄。

旋转角度可以根据需要进行修改。它可以是低于90度的任何值，这取决于箭头应该宽或窄。

  * {box-sizing ：border-box;}。btn {display：inline-block; padding：16px 30px; color：#fff; border：1px solid＃4A803C;位置：相对; border-radius：3px; background：rgb（74，168，28）;背景：线性梯度（至底部，rgba（74,168,28,1）0％，rgba（63,155,19,1）100％，rgba（56,146,12,1）100％）; .btn> span {position：relative; z-index：1;}。btn：after {content：; width：35px; height：35px;显示：block; position：absolute; top：7px;右：-18px; border：1px solid＃4A803C; border-left：none; border-bottom：none; border-radius：3px; transform：rotateY（45deg）rotate（47deg）skew（5deg）;背景图像：线性梯度（143deg，rgb（74,168,28）0％，rgb（63,155,19）100％）; } .btn：hover {background：rgb（56，146，12）;背景：线性梯度（到底部，rgba（56,146,12,1）0％，rgba（63,155,19,1）0％，rgba（74,168,28,1）100％ .btn：hover：after {background-image：linear-gradient（-47deg，rgb（74,168,28）0％，rgb（63，155，19）100％）; }  

 < a href =＃class = btn> < span>Умножительматрицы< / span>< / a>  

how to make a button with an obtuse angle?

I would like to happen like this

I got here so

My code - Fiddle

*{
  box-sizing: border-box;
}

.btn{  
  display: inline-block;
  padding: 16px 30px;
  color: #fff; 
  border: 1px solid #4A803C;
  position: relative;
  border-radius: 3px;
  background: rgb(74,168,28); /* Old browsers */
background: -moz-linear-gradient(top, rgba(74,168,28,1) 0%, rgba(63,155,19,1) 100%, rgba(56,146,12,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4aa81c', endColorstr='#38920c',GradientType=0 );
}
.btn > span{  
 position:relative;
 z-index: 1; 
}
.btn:after {
    content: "";
    width: 35px;
    height: 35px;    
    display: block;
    position: absolute;
    top: 7px;
    right: -18px;
    border: 1px solid #4A803C;
    border-left: none;
    border-bottom: none;
    border-radius: 3px;
    -webkit-transform: rotate(47deg) skew(5deg);   
    transform: rotate(47deg) skew(5deg);
    background-image: -moz-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
    background-image: -webkit-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
    background-image: -ms-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
    background-image: linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
}

.btn:hover{
  background: rgb(56,146,12); /* Old browsers */
background: -moz-linear-gradient(top, rgba(56,146,12,1) 0%, rgba(63,155,19,1) 0%, rgba(74,168,28,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38920c', endColorstr='#4aa81c',GradientType=0 );
}
.btn:hover:after{
  background-image: -moz-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
  background-image: -webkit-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
  background-image: -ms-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
  background-image: linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
}

<a href="#" class="btn">
<span>Умножитель матрицы</span>
</a>

I would be glad of any help. Thank you

解决方案

A simple solution would be to add a rotateY(Xdeg) to the .btn:after element. This would make the element's Y-axis get rotated and thus would make it look narrower than it actually is.

Rotation angle can be modified as required. It can be any value below 90 degrees depending on how wide or narrow the arrow should be. Higher the value the narrower the arrow would be.

* {
  box-sizing: border-box;
}
.btn {
  display: inline-block;
  padding: 16px 30px;
  color: #fff;
  border: 1px solid #4A803C;
  position: relative;
  border-radius: 3px;
  background: rgb(74, 168, 28);
  background: linear-gradient(to bottom, rgba(74, 168, 28, 1) 0%, rgba(63, 155, 19, 1) 100%, rgba(56, 146, 12, 1) 100%);
}
.btn > span {
  position: relative;
  z-index: 1;
}
.btn:after {
  content: "";
  width: 35px;
  height: 35px;
  display: block;
  position: absolute;
  top: 7px;
  right: -18px;
  border: 1px solid #4A803C;
  border-left: none;
  border-bottom: none;
  border-radius: 3px;
  transform: rotateY(45deg) rotate(47deg) skew(5deg);
  background-image: linear-gradient(143deg, rgb(74, 168, 28) 0%, rgb(63, 155, 19) 100%);
  
}
.btn:hover {
  background: rgb(56, 146, 12);
  background: linear-gradient(to bottom, rgba(56, 146, 12, 1) 0%, rgba(63, 155, 19, 1) 0%, rgba(74, 168, 28, 1) 100%);
}
.btn:hover:after {
  background-image: linear-gradient(-47deg, rgb(74, 168, 28) 0%, rgb(63, 155, 19) 100%);
  
}

<a href="#" class="btn">
  <span>Умножитель матрицы</span>
</a>

这篇关于如何使一个钝角的按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！