【CSS 画个梯形】

【CSS 画个梯形】
使用clip-path: polygon画梯形
- `clip-path: polygon`
  使用方式如下：
  
  效果
  实现
clip-path: polygon

是CSS的属性之一，用于裁剪元素的形状。它可以通过定义一个具有多边形顶点坐标的值来创建一个多边形的裁剪区域，从而实现元素的非矩形裁剪效果。

使用方式如下：
```
.element {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
1
2
3
```
其中多边形顶点坐标可以按照顺时针或逆时针顺序设置，坐标以百分比或像素为单位。

此外，clip-path 还支持其他的形状裁剪方式，例如 circle() 和 inset()。因此，可以根据具体的需求选择不同的裁剪方式。

效果

 实现
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="ti">
		</div>
	</body>
	<style>
		#ti{
			clip-path: polygon(0 200px,0 0,300px 0,500px 200px);
			background: red;
			width: 50%;
			height: 200px;
		}
	</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
```
相关阅读:
SpringCloud-5.服务配置（SpringCloud Config）
Elasticsearch系列教程之核心概念及用法
 『忘了再学』Shell基础 — 20、Shell中的运算符
 从零开始学习写Shell脚本【第三期，写一个实用的批量重命名指定文件夹文件脚本】
详解C语言const关键字（说明+案例）
Oracle-控制文件及日志文件的管理
 Xilinx ISE系列教程（1）：ISE开发环境下载、安装、注册（Windows 10 64位系统）
进程和线程
 论文精读GAN: Generative Adversarial Nets
如何通过反射访问一个类的私有方法
原文地址：https://blog.csdn.net/Ge_Daye/article/details/132469749

使用clip-path: polygon画梯形

clip-path: polygon

使用方式如下：

效果

实现

`clip-path: polygon`