Css3: right trapezoid with border

Question

I'm trying to create a transparent right trapezoid with color border using CSS 3 This is what I've gotten so far.

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

Any help is appreciated

Answer 1

You have to place a right border on the containing object to get the correct look. Like this:

border-right: 20px solid red;

Here is the updated fiddle

I also changed skew to skewX. Per this 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.

Answer 2

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

border: 20px solid red;