如何制作一个带有钝角的按钮?
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;
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>
我很乐意提供任何帮助。
谢谢
一个简单的解决方案是将 rotateY(Xdeg)
添加到 .btn:after
元素。这将使元素的 Y 轴旋转,从而使其看起来比实际更窄。
可以根据需要修改旋转角度。它可以是低于 90 度的任何值,具体取决于箭头的宽度或宽度。数值越大箭头越窄。
* {
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>
如何制作钝角按钮?
我愿意这样发生
我是这么过来的
我的代码 - 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>
我很乐意提供任何帮助。 谢谢
一个简单的解决方案是将 rotateY(Xdeg)
添加到 .btn:after
元素。这将使元素的 Y 轴旋转,从而使其看起来比实际更窄。
可以根据需要修改旋转角度。它可以是低于 90 度的任何值,具体取决于箭头的宽度或宽度。数值越大箭头越窄。
* {
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>