Geniş açı ile bir düğme nasıl yapılır?

Question

Geniş açı ile bir düğme nasıl yapılır?

ben burada çok

var bu

şekilde olmasını istiyorum Kodum - 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>

Herhangi bir yardımdan memnun olurum. Teşekkür ederiz

Answer 1

Basit bir çözüm, rotateY(Xdeg) öğesinin .btn:after öğesine eklenmesi olacaktır. Bu, elemanın Y ekseninin döndürülmesini sağlar ve böylece gerçekte olduğundan daha dar görünmesini sağlar.

Dönme açısı gerektiği gibi değiştirilebilir. Okun ne kadar geniş veya dar olması gerektiğine bağlı olarak 90 derecenin altında herhangi bir değer olabilir. Değer ne kadar yüksekse o ok daha dar olur.

* { 
 
    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>