एक उलझन वाले कोण के साथ बटन कैसे बनाएं?

Question

एक उलझन वाले कोण के साथ बटन कैसे बनाएं?

मैं इस

मैं यहाँ मिल गया तो

की तरह होने के लिए चाहते हैं मेरे कोड - 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>

मुझे किसी भी मदद से खुशी होगी। धन्यवाद

Answer 1

एक आसान समाधान rotateY(Xdeg).btn:after तत्व में जोड़ना होगा। यह तत्व के वाई-अक्ष को घुमाएगा और इस प्रकार यह वास्तव में उससे कम दिखने वाला होगा।

रोटेशन कोण को आवश्यकतानुसार संशोधित किया जा सकता है। तीर कितना चौड़ा या संकीर्ण होना चाहिए इस पर निर्भर करता है कि यह 9 0 डिग्री से कम मूल्य हो सकता है। तीर जितना ऊंचा होगा उतना ही ऊंचा होगा।

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