Css3：带有边框的右梯形

Question

我尝试使用transparent创建一个color右边梯形CSS 3边框这是我到目前为止所获得的。

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

感谢任何帮助

Answer 1

您必须在包含对象上放置右边框才能获得正确的外观。像这样：

border-right: 20px solid red;

以下是更新后的fiddle

我也将偏斜改为skewX。按此link：

  

注意：skew（）函数存在于早期草稿中。它一直   删除但在某些实现中仍然存在。不要使用它。

     

要获得相同的效果，如果使用skew（），请使用skewX（）   一般的一个参数或矩阵（1，tan（ay），tan（ax），1,0,0）   办法。请注意，tan（）不是CSS函数，您必须预先计算   你自己。

Answer 2

在您的代码中，您缺少边界规则的一部分。

border: 20px solid red;