어떻게 둔각을 가진 버튼을 만드시겠습니까?

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)을 추가하는 것입니다. 이렇게하면 요소의 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>