CSS3：帶有邊框的右梯形

Question

我正在嘗試使用CSS 3創建一個帶有color邊框的transparent右梯形，這就是我到目前為止所獲得的。

http://jsfiddle.net/bodyfarmer/bdhtn7kr/1/

任何幫助表示贊賞

Answer 1

您必須在包含的對象上放置一個右邊框以獲得正確的外觀。 像這樣：

border-right: 20px solid red;

這是更新的小提琴

我也將skew更改為skewX。 通過此鏈接 ：

注意：skew（）函數存在於早期草稿中。 它已被刪除，但在某些實現中仍然存在。 不要使用它。

為了獲得相同的效果，如果您使用的是帶有一個參數的skew（）或通常的矩陣（1，tan（ay），tan（ax），1，0，0），請使用skewX（）。 請注意，tan（）不是CSS函數，您必須自己預先計算。

Answer 2

在您的代碼中，您缺少邊框規則的一部分。

border: 20px solid red;