用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编写多种常见的图形的更多相关文章

  1. css写的常见图形

    .aly-tooltip { display: inline-block; padding: 5px; padding-left: 15px; padding-right: 15px; backgro ...

  2. HTML+CSS编写规范

    在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...

  3. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

  4. css编写注意事项（不定时更新）

    CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...

  5. 个人css编写规范

    前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...

  6. CSS编写指导规范和建议

    在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...

  7. css编写规范最佳实践

    最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...

  8. javaScript与css、html常见的兼容

    最近几天总是遇到兼容问题,就整理了一下javaScript和html.css出现的常见兼容.有不全面或不对的欢迎大家指正.也希望这条博客可以帮到一些刚学习的前端的朋友. 一.javaScript出现的 ...

  9. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

随机推荐

  1. 在linux命令行无界面下，使用selenium进行自动化测试

  2. Ansible ssh-key密钥认证配置

    对于被管理服务器做免密码登录设置 1.在管理服务器生成ssh-key密钥 #ssh-keygen  //生成秘钥 root@hsz:/etc/ansible# ssh-keygen Generatin ...

  3. Kubernetes 深入学习（一） —— 入门和集群安装部署

    一.简介 1.Kubernetes 是什么 Kubernetes 是一个全新的基于容器技术的分布式架构解决方案,是 Google 开源的一个容器集群管理系统,Kubernetes 简称 K8S. Ku ...

  4. 九 SpringMvc与json交互

    将json输出到页面: 1 加入jar包 2 配置Controller层,开启注解ResponseBody,将json发送到页面: 3 访问url 4 响应json,在形参列表里面加上注解

  5. YTT的提问以及由此引出的未来规划之思考

    未来规划之思考 我已经很久没有考虑过未来的规划了,之所以没有规划,是因为我觉得现实是复杂的,我现在的认知还不够深刻,建立在肤浅认知上的规划是容易经受现实的冲击而轻易改变的,与其规划变来变去,还不如干脆 ...

  6. 产品降价、AR技术、功能降级，库克和苹果还有哪些底牌可以打？

    经过十年的高速发展,苹果和iPhone迎来了拐点,他们去年的境况,也连累了一大批的供应商,但如今的苹果财务健康,产业链稳固,在面对经济寒冬和激烈竞争的时候,有很多牌可以打,而且常常会在关键时刻打出来, ...

  7. java学习-初级入门-面向对象④-类与对象-类与对象的定义和使用2

    我们继续学习类与对象,上一篇我们定义了  坐标类(Point), 这次我们在Point的基础上,创建一个圆类(Circle). 案例:创建一个圆类 题目要求: 计算圆的周长和面积:求判断两个圆的位置关 ...

  8. Python 开篇

    一.Linux基础 - 计算机以及日后我们开发的程序防止的服务器的简单操作 二.Python开发 http://www.cnblogs.com/wupeiqi/articles/5433893.htm ...

  9. LoadRunner监控Linux系统

    需要下载3个包:  地址链接:链接:https://pan.baidu.com/s/1lltAa6JnjJ7Mr88duixUSQ 密码:5yiw(1)rsh-0.17-14.i386.rpm (2) ...

  10. Eclipse创建一个动态maven项目详细步骤

    新建maven项目,new一个Dynamic Web Project 项目 输入完项目名直接finish 配maven,右键项目configure,选择Convert to Plug-in Proje ...