用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画各种不 ...
随机推荐
- Python 基础之面向对象初识与类的封装
一.面向对象类的初识 1.类的定义 #三种方式:#1.class MyClass: pass #2.推荐class MyClass(): pass #3.class MyClass(obj ...
- Python 基础之面向对象之常用魔术方法
一.__init__魔术属性 触发时机:实例化对象,初始化的时候触发功能:为对象添加成员,用来做初始化的参数:参数不固定,至少一个self参数返回值:无 1.基本用法 #例:class MyClass ...
- Serializable的理解和使用 -----转载
1.定义 这是一个接口,当一个类实现这个接口后,这个类就变成了一个可序列化的类,它就可以被写入流,保存起来,然后也可以用流读取,反序列化. 一般情况下,一个对象会随着程序的执行完成而消失,而有时我们需 ...
- 【剑指Offer面试编程题】题目1386：旋转数组的最小数字--九度OJ
题目描述: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转 ...
- Pytorch dataset自定义【直播】2019 年县域农业大脑AI挑战赛---数据准备(二)，Dataset定义
在我的torchvision库里介绍的博文(https://www.cnblogs.com/yjphhw/p/9773333.html)里说了对pytorch的dataset的定义方式. 本文相当于实 ...
- Caused by: java.net.ConnectException: Connection timed out: connect
发生这种情况的原因是:连接的路径发生错误
- 剑指offer 把数组排成最小的数 atoi和itoa，pow
pow(x,y)在#include<math.h>文件中,计算x的y次方. C++引入头文件:#include <stdlib.h> 或者 #include <cstdl ...
- Day3-Q-修补木桶 HihoCoder1362
一只木桶能盛多少水,并不取决于桶壁上最高的那块木板,而恰恰取决于桶壁上最短的那块. 已知一个木桶的桶壁由N块木板组成,第i块木板的长度为Ai. 现在小Hi有一个快捷修补工具,每次可以使用修补工具将连续 ...
- Day3-F-Buy Low Sell High-CodeForces867E
You can perfectly predict the price of a certain stock for the next N days. You would like to profit ...
- Pyspider的基本使用 -- 入门
简介 一个国人编写的强大的网络爬虫系统并带有强大的WebUI 采用Python语言编写,分布式架构,支持多种数据库后端,强大的WebUI支持脚本编辑器,任务监视器,项目管理器以及结果查看器 官方文档: ...