I want to make a trapezoid in HTML5. I know it can be done using border radius and a height of 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 a CSS3 gradient and the above method only allows solid colors.
The following style will make a parallelogram. But is there a way to skew only one of the sides, instead of both?
-webkit-transform: skew(20deg);
The trick is to create an angled content mask , and then fill in the masked area with the desired styling, in this case a background gradient. The content will be clipped to the shape of the mask.
A mask is simply a container with overflow:hidden
. If a CSS3 transform is applied to the container (for instance, a rotation or a skew operation), the mask will have a rotated or skewed shape, and the content will be clipped to this shape. A pair of nested masks, the outer one skewed and the inner one counter-skewed, produces a trapezoid mask with 2 angled sides. Skewing only the inner mask produces a trapezoid with 1 angled 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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.