用CSS编写多种常见的图形
用CSS编写多种常见的图形
正方形与长方形
这个是最简单的，直接上代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
margin-bottom: 20px;
background: pink;
}
/*长方形*/
.div div:nth-child(1){
height: 100px;
width: 200px;
}
/*正方形*/
.div div:nth-child(2){
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="div">
<div></div>
<div></div>
</div>
</body>
</html>
等腰三角形
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.div{
height: 0;
width: 0;
border-width: 100px;
border-style: solid;
border-color: skyblue green pink brown;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
上面代码会看到四个等腰三角形，把其余三个颜色改为透明即可
.div{
height: 0;
width: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent pink transparent;
}
等边三角形
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
height: 0;
width: 0;
}
.div{
border-left: 100px solid pink;
border-right: 100px solid skyblue;
border-top: 173.2px solid green;
border-bottom: 173.2px solid brown;
}
.div1{
border-top: 100px solid pink;
border-bottom: 100px solid skyblue;
border-left: 173.2px solid green;
border-right: 173.2px solid brown;
}
</style>
</head>
<body>
<div class="div"></div>
<div class="div1"></div>
</body>
</html>
等边三角形的关键比例是1:1.732
上面代码中173.2px这部分的三角形就是等边三角形
圆形
一个正方形再加上border-radius: 50%;就可以了
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
height: 100px;
width: 100px;
border-radius: 50%;
background: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
椭圆
长方形加上border-radius: 50%即可
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
height: 100px;
width: 200px;
border-radius: 50%;
background: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
圆角矩形
长方形加上border-radius进行调整即可
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
height: 100px;
width: 200px;
border-radius: 20px;
background: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
中间透明的规则图形
图形的背景透明，再加上边框颜色即可，以圆形为例
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
height: 100px;
width: 100px;
border-radius: 50%;
background: transparent;
border: 20px solid pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
直角梯形
margin三个参数时分别代表，上，左右，下
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
border-width: 0px 10px 10px 0px;
border-style: none solid solid;
border-color: transparent transparent #111;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
改变下面代码的第二和第三个参数
border-width: 0px 10px 10px 0px;
第二个参数是直角梯形的倾斜度，第三个是高度，同样也会影响倾斜度，这个自己去调试一下会更直接明白。
如果将宽度设置为0px的话，将会成为一个直角三角形，再加那两个参数可以写出任何直角三角形，不再局限于等腰三角形和等边三角形。
任意直角三角形的CSS代码
div{
width: 0px;
border-width: 0px 100px 100px 0px;
border-style: none solid solid;
border-color: transparent transparent #111;
}
等腰直角
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
border-width: 0px 100px 100px 100px;
border-style: solid;
border-color: transparent transparent #111;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
任意三角形
在等腰梯形的基础上，将宽度设为0，再改变border-width的那三个三数，可以调整出各种内角和为180的三角形。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
border-width: 0px 100px 100px 100px;
border-style: solid;
border-color: transparent transparent #111;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
一个比较有意思的图形
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
border-width: 229px 100px 100px 100px;
border-style: solid;
border-color: #111 transparent rgba(0,0,0,.2)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
扇形
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 0;
height: 0;
border-radius: 50%;
border-width: 100px 100px 100px 100px;
border-style: solid;
border-color: transparent transparent transparent #000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
平行四边形
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
height: 100px;
background: #000;
transform: skew(20deg);
margin: 20px; /*非关键代码*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
用CSS编写多种常见的图形的更多相关文章
- css写的常见图形
.aly-tooltip { display: inline-block; padding: 5px; padding-left: 15px; padding-right: 15px; backgro ...
- HTML+CSS编写规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
- CSS背景图片常见属性设置
在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称); //默认在父级元素内的左上角 2)背景平铺方式:ba ...
- css编写注意事项（不定时更新）
CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...
- 个人css编写规范
前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...
- CSS编写指导规范和建议
在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...
- css编写规范最佳实践
最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...
- javaScript与css、html常见的兼容
最近几天总是遇到兼容问题,就整理了一下javaScript和html.css出现的常见兼容.有不全面或不对的欢迎大家指正.也希望这条博客可以帮到一些刚学习的前端的朋友. 一.javaScript出现的 ...
- CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...
随机推荐
- 「luogu2617」Dynamic Rankings
「luogu2617」Dynamic Rankings 传送门 树套树直接上树状数组套主席树,常数很大就是了. 树套树参考代码: /*-------------------------------- ...
- mysql学习指令
mysql 用户管理和权限设置 参考文章:http://www.cnblogs.com/fslnet/p/3143344.html Mysql命令大全 参考文章: http://www.cnblogs ...
- android studio升级之后项目报错Could not find com.android.tools.build:aapt2:3.2.1-4818971
导致问题的原因为源代码根目录下的build.gradle中缺少对于google源服务器的配置(话说,貌似以前版本的都在jcenter中可以找到,最新版本的,好像没有上传到jcenter服务器了,估计是 ...
- java并发：初探用户线程和守护线程
用户线程和守护线程 用户线程 用户线程执行完,jvm退出.守护线程还是可以跑的 /** * A <i>thread</i> is a thread of execution i ...
- Spring 通读官方文档
Spring 通读官方文档 这部分参考文档涵盖了Spring Framework绝对不可或缺的所有技术. 其中最重要的是Spring Framework的控制反转(IoC)容器.Spring框架的Io ...
- 微信小程序request请求实例，网络请求。
最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 官方参 ...
- input 数值框处理
<input type="text"> input 若设置type=“number” ,再想对其调用处理的函数是不起作用的,为此,首先将其设为文本类型 当前要求是数字 ...
- String类与StringBuffer类
String类与StringBuffer类 一.String类和StringBuffer类的区别 String类是不可变类,新建的对象为不可变对象(String类的内容和长度是固定的),一旦被创建 ...
- django中添加日志功能
官方文档 猛戳这里 在settings中配置以下代码 #LOGGING_DIR 日志文件存放目录 LOGGING_DIR = "logs" # 日志存放路径 if not os.p ...
- golang的传值调用和传引用调用
传值还是传引用 调用函数时, 传入的参数的 传值 还是 传引用, 几乎是每种编程语言都会关注的问题. 最近在使用 golang 的时候, 由于 传值 和 传引用 的方式没有弄清楚, 导致了 BUG. ...