與css問題的響應三角形

Question

我正在用css製作響應三角形（向下箭頭）。我的問題是我想向下增加我的三角形高度但是當我增加填充底部時，它會干擾三角形的形狀。

這裏是我的代碼：

.btna { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 25%; 
 
    text-align: center; 
 
    color: white; 
 
    line-height: 50px; 
 
    text-decoration: none; 
 
    padding-bottom: 15%; 
 
    background-clip: content-box; 
 
    overflow: hidden; 
 
} 
 
.btna div { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0; 
 
    background: -webkit-linear-gradient(#d5adee, #fff); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(#d5adee, #fff); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(#d5adee, #fff); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(#d5adee, #fff); /* Standard syntax */ 
 
    padding-bottom: 50%; 
 
    width: 57.7%; 
 
    z-index: -1; 
 
    -webkit-transform-origin: 0 0; 
 
    -ms-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    -webkit-transform: rotate(-30deg) skewX(30deg); 
 
    -ms-transform: rotate(-30deg) skewX(30deg); 
 
    transform: rotate(-30deg) skewX(30deg); 
 
}

<div class="btna"> 
 
    <div></div> 
 
</div>

Answer 1

我假定你想保持其.btna類的範圍內的三角形，是否正確？

下面的代碼保留了一個三角形，同時也使它具有更高的高度並保持響應。

與

transform: rotate(-45deg) scale(1.4); 

歪斜更換transform: rotate(-30deg) skewX(30deg);可以是製造任意三角形爲直角三角形非常有用的，但因爲我們都準備好了開始與一個（其溢出方切斷），那麼它的不是很有幫助。