How to make a button with an obtuse angle? - html

Question

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

Answer 1

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>