[分享]css写4条梯形框

CSS 在前端开发中扮演着非常重要的角色，通过 CSS 可以实现各种各样的效果，其中包括梯形框效果。下面我们来看一下如何使用 CSS 实现 4 种不同的梯形框效果。第一种梯形框效果：右上角梯形框。代码...

CSS 在前端开发中扮演着非常重要的角色，通过 CSS 可以实现各种各样的效果，其中包括梯形框效果。下面我们来看一下如何使用 CSS 实现 4 种不同的梯形框效果。

第一种梯形框效果：右上角梯形框。代码如下：

.trapezoid1 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid blue;
  border-bottom: 50px solid transparent;
} 

第二种梯形框效果：左上角梯形框。代码如下：

.trapezoid2 {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid blue;
  border-bottom: 50px solid transparent;
} 

第三种梯形框效果：右下角梯形框。代码如下：

.trapezoid3 {
  width: 0;
  height: 0;
  border-bottom: 50px solid transparent;
  border-right: 100px solid blue;
  border-top: 50px solid transparent;
} 

第四种梯形框效果：左下角梯形框。代码如下：

.trapezoid4 {
  width: 0;
  height: 0;
  border-bottom: 50px solid transparent;
  border-left: 100px solid blue;
  border-top: 50px solid transparent;
} 

通过以上代码，我们就可以实现 4 种不同梯形框效果了。