代码语言：javascript复制
<!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的下面其他的都为透明把。
代码语言：javascript复制<!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>
