特殊五边形polygon

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特殊logo 页面</title>
	<style type="text/css">
		 * {
     
            margin: 0px;
            padding: 0px;
        }

        .Show {
     
            position: absolute;
            display: flex;
            flex-direction: column;
            background-color: red;
            flex: 1;
            width: 100%;
            height: 100%;
            background: url(Img/zb001.jpg) no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }
		.logon{
     
			  position: absolute;
			  top :0px;
			  right: 230px;
			 width: 860px;
        height: 660px;
        background: blueviolet;
        /*clip-path: polygon(25px 0,100% 0,100% 100%,0 100%,0 25px);*/
 		/*clip-path: polygon(300px 15px,0 645px, 0 860px,  480px 860px,     640px 0);*/
         clip-path: polygon(6px 308px,0 660px,850px 495px,790px 0,637px 0);  
          /*xy 轴坐标系*/
		}
		.imgn{
     width: 100px; height: 50px; background-color: red; }
	</style>
</head>
<body>
	<div class="Show" >
			<div class="logon"  >
					<div class="imgn" ></div>
					<div class="imgn"></div>
					<div class="imgn"></div>
					<div class="imgn"></div>
					<div class="imgn"></div>


			</div>
		
	</div>

</body>
</html>

特殊五边形polygon_第1张图片
我们可以polygna 绘制特殊的div

你可能感兴趣的:(html5)