鈍角のボタンを作る方法は？

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

簡単な解決策は、を.btn:after要素に追加することです。これにより、要素の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>