用CSS编写多种常见的图形
2024-08-31 10:09:06
用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>
最新文章
- Expert 诊断优化系列------------------透过等待看系统
- Linux环境导入*.sql文件出现数据库为空
- sokect编程进阶
- HTML5离线缓存Manifest
- XMPP 常见错误:(<failure xmlns=＂urn:ietf:params:xml:ns:xmpp-sasl＂><not-autho
- java基础回顾(六)——WeakReference、SoftReference
- 3）Java容器
- JS中null与undefined的区别
- PHP设计模式之适配器模式
- Node.js + Express + Mongodb 开发搭建个人网站（三）
- npm学习总结
- “HK”的日常之ARP断网攻击
- python 捕获异常顺序
- （三）juc高级特性——虚假唤醒 / Condition / 按序交替 / ReadWriteLock / 线程八锁
- python模块--os模块
- iOS.Notification.Bar.Color
- VMware上安装VMware tools
- Android listview自定义分割线宽度
- python try except, 异常处理
- 《Drools7.0.0.Final规则引擎教程》第4章 4.2 ruleflow-group&salience