HTML 和 CSS 画三角形和画多边行基本原理及实践
2024-09-04 19:28:14
基本 HTML 标签
<div class = 'test'></div>
基本 CSS 代码
.test {
width: 100px;
height: 100px;
background-color: #FFFFFF;
border-left: 20px solid black;
border-top:20px solid blue;
border-right: 20px solid green;
border-bottom:20px solid orange;
}
效果图
其他需要的效果根据需求改变 border 即可得到效果。
画三角形 CSS 代码
.test {
width: 00px;
height: 00px;
background-color: #FFFFFF;
border-left: 10px solid transparent;
border-top:30px solid blue;
border-right: 10px solid transparent;
border-bottom:0px solid orange;
}
效果图
画等腰四边形 CSS 代码
.test {
width: 100px;
height: 00px;
background-color: #FFFFFF;
border-left: 20px solid transparent;
border-top:00px solid blue;
border-right: 20px solid transparent;
border-bottom:20px solid orange;
}
效果图
画圆环 CSS 代码
.test {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FFFFFF;
border-left: 20px solid black;
border-top:20px solid blue;
border-right: 20px solid green;
border-bottom:20px solid orange;
}
效果图
画平行四边形 CSS 代码
.test {
width: 100px;
height: 100px;
background-color: red;
border-top: 0px solid red;
border-right: 0px solid blue;
border-bottom: 0px solid green;
border-left: 0px solid black;
transform:skew(-30deg);
}
效果图
最新文章
- Groovy学习--基本语法了解
- 查找Maven JAR坐标
- ti processor sdk linux am335x evm /bin/setup-host-check.sh hacking
- Nexus5如何手动OTA更新系统到4.4.3、4.4.4及常见问题回答
- 从源码编译rpi的内核
- Liunx初学指令
- 当需要向数据库插入空值时，sql语句的判断
- msql分区
- Linux系统启动排错实验集合
- Java虚拟机的组成
- osx升级到10.10后，使用pod install报错解决的方法
- Java Socket 实现HTTP服务器核心
- docker 搭建Mysql集群
- Allure 安装及使用
- POJ 1679 The Unique MST (次小生成树 判断最小生成树是否唯一)
- Codeforces Round #504 E. Down or Right
- ADO.NET DBHelper 类库
- 自动化测试===adb 解锁手机的思路
- java 2017/6/26杂记
- Linux Mint 17使用配置2