用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. prototype入门----自定义创建元素

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Python 之网络编程之socket(1)TCP 方式与UDP方式

    一:socket介绍 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. 建立网络通信连接至少要一对端口号(socket).socket本质是编程接口(API) ...

  3. SpringBoot 集成MyBatis、事务管理

    集成MyBatis (1)在pom.xml中添加依赖 <!-- mybatis的起步依赖.包含了mybatis.mybatis-spring.spring-jdbc(事务要用到)的坐标 --&g ...

  4. iOS项目Info.plist中关键字汇总

    1. Application does not run in background (键名:UIApplicationExistsOnSuspend) 自从iOS4.0之后,当你在应用程序执行的时候按 ...

  5. kibana 删除document或者type

    // 删除某个document DELETE /索引名称/type名称/document编号(id) // 删除整个type PUT 索引名称/type名称/_delete_by_query?conf ...

  6. bootloader 详细介绍

    Bootloader 对于计算机系统来说,从开机上电到操作系统启动需要一个引导过程.嵌入式Linux系统同样离不开引导程序,这个引导程序就叫作Bootloader. 6.1.1  Bootloader ...

  7. 在IDEA中如何使用tomcat部署项目

    1.首先,你得先建个Java 项目,然后next 2.新建完项目后,然后右击项目,选择“Add Framework Support...” 3.将Web Application 前的框勾选起来,然后点 ...

  8. 前端学习笔记系列一：4 vue中@click.native

    .native - listen for a native event on the root element of component. 作用:[给组件绑定原生事件] 例子:如果使用router-l ...

  9. syx学习笔记

    SYX复活了,在悲痛之际,希望能让自己获得更多的知识,更有进步,所以留此博客 数学 推荐blog: 1 2 原根表 FFT(快速傅里叶变换) 2019/12/05 √ 博客 blog 题目 Q1 NT ...

  10. 吴裕雄--天生自然JAVA面向对象高级编程学习笔记：Object类

    class Demo{ // 定义Demo类,实际上就是继承了Object类 }; public class ObjectDemo01{ public static void main(String ...