使用css的寬度自定義

對不起，問這種類型的問題。但我想知道，我有一個Parent Div與height和width爲100px它看起來像方。有沒有一種方法可以自定義寬度單獨像top-width和bottom-width使用css的寬度自定義

例如 width適用於left to right和height適用於top to bottom 如果top-width is zero和bottom width is 100，height is 100那麼它看起來像triangle 這裏是FIDDLE 我想用不同的形狀做同樣的事情。是否有可能在CSS中實現這一點。任何建議都會很棒。

來源

2013-09-25 Vignesh Pichamani

您是否可以添加圖像以顯示預期結果？ –

不，這是不可能做到這一點，而不是製造tringles或形狀像梯形我們在撥弄使用邊框寬度是這樣的：

.triangle { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid blue; 
    margin:20px auto; 
}

http://jsfiddle.net/7qbGX/

我們將div的主要內容設置爲0高度和0寬度。，然後使用border-width來完成這個技巧。

訣竅是，邊界像在相框中的角落相遇。所以如果我們使兩個邊界不可見並且減小一個邊界的大小。它會形成一個三角形的形狀。有關更多詳情，您可以參考this這樣的問題。

乾杯！

來源

2013-09-25 06:44:27 aelor

感謝您的回覆。我怎樣才能使內容出現在三角形的形狀內。http://jsfiddle.net/7qbGX/2/ –

在這種情況下，你可能想試試這個：http://www.csstextwrap.com – aelor

發現這非常有趣的帖子，感謝你的有趣的問題：

http://css-tricks.com/snippets/css/css-triangle/

來源

2013-09-25 06:42:56 mavrosxristoforos

好了，這樣的事情不存在CSS。有一些技巧，比如使用：before和：after選擇器組合多個元素以使事情看起來像預期的一樣，請參閱this list of shapes，但它們不會像您預期的那樣運行。像文本流這樣的東西不會在沒有使用一點Javascript的情況下工作。

來源

2013-09-25 06:43:27 MildlySerious

我還在揉我的眼睛！ – mavrosxristoforos

Fiddle

#sample { 
    width: 0; 
    height: 0; 
    border-bottom: 120px solid green; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
}

和source

來源

2013-09-25 06:43:59 DGS

據我所知，用你的方式沒有辦法。但有transform財產，可能有助於實現你想要的東西，儘管你仍然需要玩弄它。請查看this或this以瞭解更多詳情:)

來源

2013-09-25 06:44:40 Pawcu

使用css的寬度自定義

回答

相關問題