Come creare un pulsante con un angolo ottuso?

Question

come fare un pulsante con un angolo ottuso?

vorrei che accada in questo modo

sono arrivato qui in modo

Il mio codice - 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>

Sarei felice di qualsiasi aiuto. Grazie

Answer 1

Una soluzione semplice sarebbe aggiungere un elemento rotateY(Xdeg) all'elemento .btn:after. Ciò farebbe ruotare l'asse Y dell'elemento e quindi renderlo più stretto di quanto non sia in realtà.

L'angolo di rotazione può essere modificato secondo necessità. Può essere qualsiasi valore inferiore a 90 gradi a seconda di quanto deve essere ampia o stretta la freccia. Più alto è il valore più stretta sarà la freccia.

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