Css打造一个简单的静态七巧板
2024-08-31 02:26:45
偶然在微博上看到用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;
width: 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{
width: 106px;
height: 106px;
background: #C96798;
border-left: 0px solid transparent;
transform:translate(150px,150px) rotate(45deg); }
.t4{
width: 106px;
border-top: 106px solid #00bdd0;
border-right: 106px solid transparent;
transform:translate(150px,150px) rotate(-45deg);
}
.t5{
width: 0px;
border-top: 106px solid #5dbe79;
border-right: 106px solid transparent;
transform:translate(75px,225px) rotate(45deg);
}
.t6{
width: 150px;
height: 75px;
transform:translate(300px) rotate(90deg) skew(45deg);
background: #ffdd01;
}
.t7{
width: 0px;
border-top: 150px solid #0117bf;
border-right: 150px solid transparent;
transform:translate(300px,300px) rotate(180deg);
}
最新文章
- 使用InstallAnywhere工具打包Java_Web程序
- 【转】PowerShell入门(十):使用配置文件
- object-c 继承多态 动态数据类型
- json、javaBean、xml互转的几种工具介绍 (转载)
- R 读取clipboard内容 (MAC)
- ES6中的高阶函数:如同 a =>; b =>; c 一样简单
- 【技术宅11】php入门运算
- 使用XAML在WPF项目中承载ArcGIS Engine地图控件开发
- 如何把Python2的代码转换为Python3的代码
- Cocos2d-x lua游戏开发之安装Lua到mac系统
- Sikuli:创新的图形化编程技术
- awk脚本使用的几种方法
- oracle异地备份
- Cassandra 原理介绍
- mysql-python安装时EnvironmentError: mysql_config not found
- 实践出真知-所谓";java没有指针";,那叫做引用!
- 学习Unity -- 理解依赖注入(IOC)三种方式依赖注入
- 036 关于网站的UV分析
- delphi连接mysql (通过libmysql.dll连接)
- 接口隔离原则(Interface Segregation Principle,ISP)
热门文章
- Django Template(模板系统)
- Linux之ssh中XSHELL无法连接解决方案
- css进阶----盒子模型,Reset CSS,css浮动,css定位,z-index属性
- 【Codeforces Global Round 1 C】Meaningless Operations
- BUPT2017 springtraining(16) #6 ——图论
- [BZOJ1031][JSOI2007]字符加密Cipher(后缀数组)
- ELECTRON开发环境配置方法
- oracle capability i/o(压力測试数据库serveri/o性能)
- 上机题目(0基础)- 数据库事务(Java)
- 【HDOJ 2255】奔小康赚大钱(KM算法)