【CSS 画个梯形】_css画梯形

作者：凡人多烦事01 | 2024-02-27 06:41:59

踩

css画梯形

使用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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/150798