如何在瀏覽器窗口調整大小時調整CSS中的梯形大小

我試圖在調整瀏覽器窗口大小時調整梯形形狀。我試圖通過使用box-resize來做到這一點，但它仍然無法正常工作。是否可以通過使用border黑客來定義/創建梯形圖？在調整瀏覽器窗口大小時，還可以通過其他方式使梯形具有調整大小的能力？如何在瀏覽器窗口調整大小時調整CSS中的梯形大小

<body style="position:relative;height:500px;"> 
    <div id="personal" style="position:relative; 
     background-color: red; 
     width:100%; 
     height:100%;"> 
     <div id="floor" style="position:absolute; margin-top:10px; 
      border-bottom: 300px solid black; 
      border-left: 565px solid transparent; 
      border-right: 570px solid transparent; 
      height: 10%; 
      width: 100%;"> 
     </div> 
    </div> 
</body>

來源

2014-10-29 Karbox

歡迎SO隊友！因爲這是你的問題得到了很好的解釋，但我只是對代碼塊格式和內容做了一些小的改動，目的是使它更好。如果您覺得任何編輯不正確/違背了您的文章的原意，請隨時回滾編輯。 – Harry 2014-10-29 11:59:13

[This]（http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643）是我回寫的回答。它不使用邊界破解創建梯形，但可以幫助您瞭解用於實現梯形形狀的替代方法。 – Harry 2014-10-29 12:02:05

當然，非常感謝@哈里格式正確。好例子[鏈接]（http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643） – Karbox 2014-10-29 20:41:18

不能適用百分比單位邊框，但你可以用vw單位實現自己的目標：

1/100的V + iewport的寬度。（source : MDN）

DEMO

body { 
 
    position:relative; 
 
    height:500px; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#personal { 
 
    position:relative; 
 
    background-color: red; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#floor { 
 
    position:absolute; 
 
    top:10px; 
 
    border-bottom: 300px solid black; 
 
    border-left: 19vw solid transparent; 
 
    border-right: 19vw solid transparent; 
 
    height: 10%; 
 
    width: 60vw; 
 
}

<body> 
 
    <div id="personal"> 
 
     <div id="floor"></div> 
 
    </div> 
 
</body>

注：我也動了你的內聯CSS一個單獨的樣式表內聯CSS是不推薦。

vw單位由IE9 + see canIuse支持

來源

2014-10-29 10:31:24

很有幫助@ web-tiki。我有下一個問題，我使用梯形後，它是一個很好的解決方案，使div看起來像這樣[鏈接]（http://jsfiddle.net/j4u6bom1/15/）？如何更好地適應這些元素，因爲現在當我調整瀏覽器窗口大小時，梯形不適合頂部邊框？ – Karbox 2014-10-30 09:11:59

@Karbox這個怎麼樣：http://jsfiddle.net/webtiki/z8d1rhk3/？ – 2014-10-30 12:15:08

工作正常:)，但我使用divs，因爲以後要放置一些圖像（或畫布）或其他元素在每個div。也許我用div來思考這個解決方案的方式並不是很好，所以如果他們更推薦，或者你的知識和經驗可以幫助解決這個問題，我可以接受其他解決方案。 – Karbox 2014-10-30 13:42:45

如何在瀏覽器窗口調整大小時調整CSS中的梯形大小

回答

相關問題