【CSS 画个梯形】

最新推荐文章于 2025-01-28 08:03:01 发布

原创最新推荐文章于 2025-01-28 08:03:01 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

css 专栏收录该内容

13 篇文章

订阅专栏

博客介绍了CSS用于裁剪元素形状的属性，可通过定义多边形顶点坐标创建多边形裁剪区域，实现元素非矩形裁剪效果。顶点坐标可按顺/逆时针设置，以百分比或像素为单位，还支持其他形状裁剪方式，可按需选择。

使用clip-path: polygon画梯形

`clip-path: polygon`

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

使用方式如下：

.element {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

其中多边形顶点坐标可以按照顺时针或逆时针顺序设置，坐标以百分比或像素为单位。

此外，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>