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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/10/01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
