用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. egret inspector插件无法使用

    调试项目要安装egret inspector查看游戏场景的资源,装了插件点击不显示. 解决方法:将chrome版本回退. 下载地址:http://mydown.yesky.com/pcsoft/279 ...

  2. win7系统实现内外网同时连接图文教程

    解决方案:修改路由表 在工作中,经常会遇到切换内外网的网络情况,通常情况下都是断开/连接网络,很麻烦.我们可以使用route命令来解决此类问题,route add.route delete.route ...

  3. Kali aircrack-ng wifi密码破解(暴力)

    1.kali linux安全渗透 2.工具aircrack-ng 3.ifconfig查看你的网卡信息,wlan0即无线网卡,注意,如果没有发现网卡可能是芯片不能被识别,建议选择网卡芯片为3037或r ...

  4. Codeforces 1196D2 RGB Substring (Hard version) 题解

    题面 \(q\) 个询问,每个询问给出一个字符串 \(s\),要你在 \(s\) 中用最小替换得到无穷字符串 RGBRGBRGB... 的长度为定值 \(k\) 的子串. 题解 一眼看过去可能是编辑距 ...

  5. Random Variables

    可测空间(Measurable Space)和测度空间(Measure Space) 集合X,X上的一个σ-algebra A,则(X,A)被称为可测空间(measurable space) 再在A上 ...

  6. js 实现去重

    ES6 set去重 Array.from(new Set([1,2,3,3,4,4])) // [1,2,3,4] [...new Set([1,2,3,3,4,4])] // [1,2,3,4] 使 ...

  7. bzoj 4747: [Usaco2016 Dec]Counting Haybales

    23333,在扒了一天题解之后发现我竟然还能秒题,虽然这是个pj的sb题... (排个序,然后upper_bound和lower_bound一用就行了(是不是有O(1)的查询方法啊??貌似要离散啊,一 ...

  8. 078、Java数组之数组的引用传递

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  9. Python集合语法

    a = {1,2,3,4,5,6,7,8,"aa","2"}    b = {2,3,4,5,6,7,8,9,99,7,6,6} v = a.intersect ...

  10. ROS-2 : ROS系统层级结构

    一.ROS文件系统层级 ROS的文件和文件夹按如下层级来组织: