zoukankan      html  css  js  c++  java
  • Css打造一个简单的静态七巧板

    偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲。

    主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三角形和右边蓝色的三角形没有做限制,所以我做出来看到的效果是这样的:

    之后自己做了稍微的调整,调整之后的效果是这样的:

    这里直接将板子的位置放在了浏览器的左上角,利用了border-top和border-right来进行位置的控制,下面是代码:

    html代码:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Css打造一个静态七巧板</title>
    	<link rel="stylesheet" type="text/css" href="test21.css">
    </head>
    <body>
    	<div class="wrap">
    		<div class="t t1 t11"></div>
    		<div class="t t2 t22"></div>
    		<div class="t t3 t33"></div>
    		<div class="t t4 t44"></div>
    		<div class="t t5 t55"></div>
    		<div class="t t6 t66"></div>
    		<div class="t t7 t77"></div>
    	</div>
    </body>
    </html>
    

      Css代码:

    .warp{
    	position: relative;
    	 300px;
    	height: 400px;
    }
    
    .t{
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	transform-origin:0 0;
    }
    .t1{
    	border-top: 212px solid red;
    	border-right: 212px solid transparent;
    	transform:translate(150px,150px) rotate(-135deg);
    }
    .t2{
    	border-top: 212px solid #FADF17;
    	border-right: 212px solid transparent;
    	transform:translate(150px,150px) rotate(135deg);
    }
    .t3{
    	 106px;
    	height: 106px;
    	background: #C96798;
    	border-left: 0px solid transparent;
    	transform:translate(150px,150px) rotate(45deg);
    	
    }
    .t4{
    	 106px;
    	border-top: 106px solid #00bdd0;
    	border-right: 106px solid transparent;
    	transform:translate(150px,150px) rotate(-45deg);
    }
    .t5{
    	 0px;
    	border-top: 106px solid #5dbe79;
    	border-right: 106px solid transparent;
    	transform:translate(75px,225px) rotate(45deg);
    }
    .t6{
    	 150px;
    	height: 75px;
    	transform:translate(300px) rotate(90deg) skew(45deg);
    	background: #ffdd01;
    }
    .t7{
    	 0px;
    	border-top: 150px solid #0117bf;
    	border-right: 150px solid transparent;
    	transform:translate(300px,300px) rotate(180deg);
    }
    

      

    做Web前端的代码猴
  • 相关阅读:
    ADO.NET FOR MySQL帮助类
    遍历文件夹及其子文件夹下的.pdf文件,并解压文件夹下所有的压缩包
    history.back();谷歌浏览器,iframe后退问题
    Request.url请求属性
    正则表达式 取两字符中间的字符串(双向非贪婪模式)
    MVC 项目中为什么会有两个web.config
    c#动态编译并动态生成dll
    siteserver cms选择栏目搜索无效
    jquery修改Switchery复选框的状态
    ntko office在线编辑控件问题记录
  • 原文地址:https://www.cnblogs.com/wang-bo/p/6878839.html
Copyright © 2011-2022 走看看