用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>
posted @ 2020-02-03 19:06  司徒炼  阅读(314)  评论(0编辑  收藏  举报