使用CSS 绘制各种形状
2024-10-21 11:45:19
如何使用CSS 绘制各种形状?
很多小伙伴在做开发的时候,遇到一些要画很多形状的时候,就很纠结了,知道怎么用CSS去布局,就是不知道怎么画图案。
其实使用CSS可以绘制出很形状的,比如三角形,梯形,圆形,椭圆形等等,并不只能画矩形。
今天的教程,就来教大家怎么去用CSS绘制这些图形吧。
为了方便大家去理解,今天分成基本形状和组合形状来一起讲解吧,基本形状是非常好理解的,再利用这些基本形状进行组合,就可以实现稍微复杂的组合形状了。
基本形状
三角形
梯形
圆形
椭圆
球体
半圆
菱形
组合形状
心形
心形是由两个圆形和一个矩形进行组合得到的。
扇形
扇形是由一个圆形和一个矩形进行组合得到的,用矩形遮住圆形的一部分就形成了扇形。
五边形
五边形是由一个三角形和一个梯形进行组合得到的。
六边形
六边形是由两个三角形和一个矩形进行组合得到的。
长方体
长方体是由六个矩形进行组合得到的。
圆柱体
圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。
棱锥
棱锥是由四个三角形和一个矩形进行组合得到的。
最后
今天讲的内容里,有些可能大家会觉得有些比较难实现,其实你也可以使用 clip-path 这一个属性,绘制各种形状。
当然,CSS能绘制的东西,远不止这些。还有许多东西今天一下子讲不完,今天讲的都是比较基础的一些,对这个感兴趣的小伙伴可以后面自己去探索一下。
最新文章
- How threads differ from processes
- Docker Registry服务启动过程浅析
- 【2016-10-12】【坚持学习】【Day3】【责任链模式】
- [转]SVN客户端解决authorization failed问题
- H5-表格、表单
- K2 blackpearl 流程开发(二)
- NSTemporaryDirectory 临时文件
- JS 没有块级作用域
- http协议说明
- HTML DOM 创建与修改
- Django--入门篇:下载与项目生成
- OpenCV分通道显示图片,灰度,融合,直方图,彩色直方图
- JavaScript中高阶函数
- 爬虫不过如此(python的Re 、Requests、BeautifulSoup 详细篇)
- aspx页面使用ajax遇到try catch中使用Response.End()报错
- JavaScript——this
- [VB]常用函数
- 为DOM节点添加或者删除class
- import的使用
- python函数的万能参数