利用css3书写正6边形
首页 > >    作者:lininn   2017年11月7日 9:37 星期二   热度:1290°   百度已收录  
时间:2017-11-7 9:37   热度:1290° 
1.倾斜正六边形
<div id="box">
<div class="con-show01 margin-left margin-top">  
        <div class="con-show02">  
          <div class="con-show03 bg04">  
            <img src="">  
             
          </div>  
        </div>  
      </div>  
  </div>
	<style>
	#box{
		width: 200px;height: 250px;
		transform: rotate(30deg);
	}
	.con-show01{width: 200px;height: 250px;float: left;margin-left: 10px;overflow: hidden;transform:rotate(120deg);}  
.con-show02{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);}  
.con-show03{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);position: relative;background: pink;}  
	</style>


2.正六边形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div class="con-show01 margin-left margin-top">  
        <div class="con-show02">  
          <div class="con-show03 bg04">  
            <img src="">  
             
          </div>  
        </div>  
      </div>  
	<style>
	.con-show01{width: 200px;height: 250px;float: left;margin-left: 10px;overflow: hidden;transform:rotate(120deg);}  
.con-show02{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);}  
.con-show03{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);position: relative;background: pink;}  
	</style>
</body>
</html>



二维码加载中...
本文作者:lininn      文章标题: 利用css3书写正6边形
本文地址:?post=62
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn