響應三角形與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(-30deg) skewX(30deg); 同

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

傾斜對於將任何三角形變成直角三角形非常有用，但是因為我們已經准備好從一個（溢出截止的方形）開始，所以它不是很有幫助。