使用CSS 绘制各种形状
如何使用CSS 绘制各种形状？
很多小伙伴在做开发的时候，遇到一些要画很多形状的时候，就很纠结了，知道怎么用CSS去布局，就是不知道怎么画图案。
其实使用CSS可以绘制出很形状的，比如三角形，梯形，圆形，椭圆形等等，并不只能画矩形。
今天的教程，就来教大家怎么去用CSS绘制这些图形吧。
为了方便大家去理解，今天分成基本形状和组合形状来一起讲解吧，基本形状是非常好理解的，再利用这些基本形状进行组合，就可以实现稍微复杂的组合形状了。
基本形状
三角形
梯形
圆形
椭圆
球体
半圆
菱形
组合形状
心形
心形是由两个圆形和一个矩形进行组合得到的。
扇形
扇形是由一个圆形和一个矩形进行组合得到的，用矩形遮住圆形的一部分就形成了扇形。
五边形
五边形是由一个三角形和一个梯形进行组合得到的。
六边形
六边形是由两个三角形和一个矩形进行组合得到的。
长方体
长方体是由六个矩形进行组合得到的。
圆柱体
圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。
棱锥
棱锥是由四个三角形和一个矩形进行组合得到的。
最后
今天讲的内容里，有些可能大家会觉得有些比较难实现，其实你也可以使用 clip-path 这一个属性，绘制各种形状。
当然，CSS能绘制的东西，远不止这些。还有许多东西今天一下子讲不完，今天讲的都是比较基础的一些，对这个感兴趣的小伙伴可以后面自己去探索一下。
使用CSS 绘制各种形状的更多相关文章
- 如何用 CSS 绘制各种形状
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...
- 我是如何用 CSS 绘制各种形状的
自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...
- css绘制各种形状
代码:http://runjs.cn/code/9lyjtbxl: 效果:http://sandbox.runjs.cn/show/9lyjtbxl <!DOCTYPE html> < ...
- Css绘制形状
前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...
- css绘制常见的几何图形
前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...
- CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 用CSS绘制最常见的40种形状和图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 摘记 史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
随机推荐
- Python爬虫:原来微博上的视频下载链接在这啊
最近看了一下网页版的微博,觉得那上面的视频不错,想获取它上面的下载链接,于是就写了这篇博文. 1. 几个视频播放平台的下载链接的实现 1. 西瓜视频 西瓜视频这个平台上面的视频下载链接一开始就存在于视 ...
- LeetCode-587 安装栅栏及三种凸包算法的学习
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/erect-the-fence 题目描述 在一个二维的花园中,有一些用 (x, y) 坐标表示的树 ...
- Linux学习之文件目录指令（部分）
包括了 ls pwd cd mkdir rmdir touch cp rm mv cat echo more less head tail > >>指 ...
- Python实现XX短视频加密算法抓包分析及刷邀请
Python实现XX短视频加密算法抓包分析及刷邀请 出自:https://zhuanlan.zhihu.com/p/466929667?utm_id=0 Python彳余 一个会常常更新互联网,编程的 ...
- sd 买送服务，自动带出销售订单行项目
需要先配置自动带出一行行项目,然后增强代码里去修改带出来的数量,注意事务码的判断,不然影响程序效率 FV45PF0N_NATRAB_SELECTION IF SY-TCODE = 'VA03'. EL ...
- 狄利克雷过程(Dirichlet Process）
先从狄利克雷过程的motivation开始说起,如果我们有一些数据,这些数据是从几个高斯分布中得出的,也就是混合高斯模型中得出的,比如下图这样 但是呢,我们并不知道混合高斯模型中到底有多少个高斯分布, ...
- js树搜索框查询所有匹配节点及父节点（纯js实现）
// 搜索框输入查询树节点(纯前台js) //name 搜索框输入的值: //wgObj.dwtreeDateAll 为树 的全量数据 // titleArr 与输入框匹配的节点数组 //arrTar ...
- unity 扇形范围检测目标
第一种 代码方法 传入目标点测试即可 private float ScopeDistance = 2f;//扇形距离 private float ScopeJiaodu = 120;//扇形的角度 / ...
- 链接mysql数据库报错：2003-cant connect to Mysql server on ‘localhost’(10038)
今天用navicat连mysql时候突然报错了 我百度了一下,知道了是mysql服务没开,但是我打开了服务,发现服务里面没有mysql,于是就去cmd以管理员身份打开命令提示符,切换到安装mysql的 ...
- 第二周集训队比赛wp
Web1 直接截包改get为Host: Web2: 不一样的猪圈 普通的猪圈变种 NormalPwn 用IDA查看发现main下面有一个危险函数点进去发现/bin/sh 进main空格发现找cmman ...