Geek Answers Handbook

HTML trapezoid with CSS3 Gradient applied to it

I want to make a trapeze in HTML5. I know this can be done using border radius and height 0:

#trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid COLOR HERE; height: 0; width: 100px; }

However, I want to apply the CSS3 gradient, and the above method allows only solid colors.

The following style will make a parallelogram. But is there a way to migrate only one of the parties, and not both?

 -webkit-transform: skew(20deg);
+7
source share
1 answer

The trick is to create an angled mask of the content , and then fill the hidden area with the desired style, in this case the background gradient, the Content will be attached to the shape of the mask.

A mask is just a container with overflow:hidden . If the CSS3 transform is applied to the container (for example, a rotation or skew operation), the mask will have a rotated or skewed shape, and the content will be cropped to this shape. A pair of nested masks, external, skewed and internal, with a skew, creates a trapezoidal mask with two angular sides. Tilting only the inner mask creates a trapezoid from 1 corner side.

  Both masks skewed Inner mask skewed _________________ _________________ / \ | \ / clipped content \ | clipped content \ /_____________________\ |__________________\

JSFiddle demos:

HTML

 <div class="main"> <div class="outer-mask"> <div class="inner-mask"> <div class="content">Styled content goes here</div> </div> </div> </div>

CSS

 .main { position: relative; } .outer-mask { position: absolute; left: 95px; top: 45px; width: 390px; height: 110px; overflow: hidden; -webkit-transform: skew(20deg, 0deg); -ms-transform: skew(20deg, 0deg); -o-transform: skew(20deg, 0deg); transform: skew(20deg, 0deg); } .inner-mask { position: absolute; left: -45px; top: 0px; width: 390px; height: 110px; overflow: hidden; -webkit-transform: skew(-40deg, 0deg); -ms-transform: skew(-40deg, 0deg); -o-transform: skew(-40deg, 0deg); transform: skew(-40deg, 0deg); }
+8
source

More articles:


All Articles