Css3: 带边框的右梯形
Css3: right trapezoid with border
我正在尝试使用 CSS 3 创建一个带有 color 边框的 transparent 右梯形 这就是我目前得到的结果。
http://jsfiddle.net/bodyfarmer/bdhtn7kr/1/
感谢任何帮助
在您的代码中，您缺少部分边框规则。
border: 20px solid red;
您必须在包含的对象上放置右边框以获得正确的外观。像这样：
border-right: 20px solid red;
这是更新后的 fiddle
我也把 skew 改成了 skewX。根据这个 link:
Note: The skew() function was present in early drafts. It has been
removed but is still present in some implementations. Do not use it.
To achieve the same effect, use skewX() if you were using skew() with
one parameter or matrix(1, tan(ay), tan(ax), 1, 0, 0) for the general
way. Note that tan() isn't a CSS function and you have to precalculate
it yourself.
我正在尝试使用 CSS 3 创建一个带有 color 边框的 transparent 右梯形 这就是我目前得到的结果。
http://jsfiddle.net/bodyfarmer/bdhtn7kr/1/
感谢任何帮助
在您的代码中，您缺少部分边框规则。
border: 20px solid red;
您必须在包含的对象上放置右边框以获得正确的外观。像这样：
border-right: 20px solid red;
这是更新后的 fiddle
我也把 skew 改成了 skewX。根据这个 link:
Note: The skew() function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.
To achieve the same effect, use skewX() if you were using skew() with one parameter or matrix(1, tan(ay), tan(ax), 1, 0, 0) for the general way. Note that tan() isn't a CSS function and you have to precalculate it yourself.