如何使用jquery和css3製作角度標籤界面？

Question

這是我的目標。帶有透明度的傾斜標籤位於另一個頂部。我如何建立這個沒有使用jpg或PNG，但只有CSS？

Answer 1

這TUTS將讓你去，但我會盡力在一分鐘內實體模型的東西！

http://www.howtocreate.co.uk/tutorials/css/slopes

http://net.tutsplus.com/articles/news/fun-with-css-shapes/

BTW很好的問題！

編輯：

這裏是 「最後」 的結果：

看到它here！

注：

要知道，這是一個「黑客」，它可能不是最好的主意，實際上實現它，我覺得（現在不能嘗試一下），即有此一些問題如果你問可用性和可訪問，我會說去與圖像:)

Answer 2

我對這個問題採取是使用CSS創建角度： http://www.howtocreate.co.uk/tutorials/css/slopes 或 http://www.dinnermint.org/blog/css/creating-triangles-in-css/

創建的「結束」作爲白色/ bl的角度的一片標籤ack，然後使用jQuery來應用透明度和選擇。

這應該可以幫助您在沒有圖像的情況下啓動。

Answer 3

它是否必須與CSS，或者你只是希望不使用光柵圖像？例如，您可以使用SVG背景圖像，該圖像可能比柵格圖像小，文件大小會更好。如果您擔心HTTP請求，則可以使用數據URI。如果你不想使用背景圖像，你也可以使用SVG或PNG作爲邊框圖像。