css巧妙绘制长方形中完美直角梯形

在网页设计中，有时需要在长方形容器内创建一个直角梯形。传统方法可能涉及复杂的代码，但利用css的clip-path属性，可以轻松实现。

解决方案

clip-path属性允许通过polygon函数裁剪元素为任意多边形。要创建一个直角梯形，只需使用以下代码：

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.梯形 {
  clip-path: polygon(0% 0%, 30% 0px, 70% 50%, 100% 50%, 100% 100%, 0 100%);
}

效果图：

[效果图]

html代码：

<div class="长方形">
  <div class="梯形">内容</div>
</div>

css代码：

.长方形 {
  width: 600px;
  height: 300px;
  background-color: #FFD900;
  border-radius: 20px;
  position: relative;
}

.梯形 {
  width: 580px;
  height: 280px;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #fff;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  font-weight: 700;
  font-size: 40px;
  padding-left: 50px;
  padding-bottom: 50px;
  box-sizing: border-box;
  clip-path: polygon(0% 0%, 30% 0px, 70% 50%, 100% 50%, 100% 100%, 0 100%);
}

这种方法简洁、灵活，为在长方形中创建精确的直角梯形提供了优雅的解决方案。