用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>
