CSS3直角梯形效果可以让网页更加美观，给用户提供更好的视觉体验。下面我们一起来看看如何实现CSS3直角梯形效果。

/* 实现斜角梯形 */
 trapezoid {
width: 200px;
height: 0;
border-bottom: 50px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
/* 实现直角梯形 */
 right-trapezoid {
width: 200px;
height: 50px;
position: relative;
}
right-trapezoid:before {
content: "";
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid red;
}
right-trapezoid:after {
content: "";
position: absolute;
top: 0;
right: -50px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid red;
}

如上代码中，通过border设置上下两条边的样式，左右两条边使用transparent透明边框实现斜角梯形效果，并赋值给trapezoid类。而直角梯形则是通过伪元素before和after在右侧增加边框实现的，其中before边框在左侧，after边框在右侧，两个边框与原元素构成直角梯形。

CSS3直角梯形效果可以应用于导航栏中，为导航栏增加美观的图形效果。