特殊五边形polygon

milijiangjun

于 2020-09-10 15:00:57 发布

阅读量355

点赞数

分类专栏： # html5

本文链接：https://blog.csdn.net/milijiangjun/article/details/108514292

版权

html5 专栏收录该内容

232 篇文章 4 订阅

订阅专栏

<!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>

在这里插入图片描述
我们可以polygna 绘制特殊的div

milijiangjun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
特殊五边形polygon

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

扫一扫

专栏目录