clip-path

时间:2022-07-28

本文章向大家介绍clip-path，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		#div
		{
			width: 0px;height: 0px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;border-left:100px solid rgba(0,0,0,0);
			border-right:100px solid    rgba(0,0,0,0);
			border-top:100px solid  rgba(0,0,0,0);
			border-bottom:100px solid  red;
		}
	</style>
</head>
<body>
<div id="div"></div>
</body>
</html>

核心在于：高宽为0，除了border的下面其他的都为透明把。

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div{
	width: 200px;height: 200px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;
	background: black;
	-webkit-clip-path:polygon(50% 0,75% 25%,100% 25%,75% 75%,100% 100%,50% 80%,0% 100%,25% 75%,0% 25%,25% 25%);

}

    </style>
</head>
<body>
	<div id='div'></div>
</body>
</html>

随机文章

本站知识点必读