如何使用CSS 绘制各种形状？

很多小伙伴在做开发的时候，遇到一些要画很多形状的时候，就很纠结了，知道怎么用CSS去布局，就是不知道怎么画图案。

其实使用CSS可以绘制出很形状的，比如三角形，梯形，圆形，椭圆形等等，并不只能画矩形。

今天的教程，就来教大家怎么去用CSS绘制这些图形吧。

为了方便大家去理解，今天分成基本形状和组合形状来一起讲解吧，基本形状是非常好理解的，再利用这些基本形状进行组合，就可以实现稍微复杂的组合形状了。

基本形状

三角形

梯形

圆形

椭圆

球体

半圆

菱形

组合形状

心形

心形是由两个圆形和一个矩形进行组合得到的。

扇形

扇形是由一个圆形和一个矩形进行组合得到的，用矩形遮住圆形的一部分就形成了扇形。

五边形

五边形是由一个三角形和一个梯形进行组合得到的。

六边形

六边形是由两个三角形和一个矩形进行组合得到的。

长方体

长方体是由六个矩形进行组合得到的。

圆柱体

圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。

棱锥

棱锥是由四个三角形和一个矩形进行组合得到的。

最后

今天讲的内容里，有些可能大家会觉得有些比较难实现，其实你也可以使用 clip-path 这一个属性，绘制各种形状。

当然，CSS能绘制的东西，远不止这些。还有许多东西今天一下子讲不完，今天讲的都是比较基础的一些，对这个感兴趣的小伙伴可以后面自己去探索一下。

 
转发

@WEB开发李家靖：

如何使用CSS 绘制各种形状？

0/2000字

 

使用CSS 绘制各种形状的更多相关文章

  1. 如何用 CSS 绘制各种形状

    自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...

  2. 我是如何用 CSS 绘制各种形状的

    自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性的值不仅可以接受长度值,还能接 ...

  3. css绘制各种形状

    代码:http://runjs.cn/code/9lyjtbxl: 效果:http://sandbox.runjs.cn/show/9lyjtbxl <!DOCTYPE html> < ...

  4. Css绘制形状

    前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...

  5. css绘制常见的几何图形

    前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...

  6. CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. 用CSS绘制最常见的40种形状和图形

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  8. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  9. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  10. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

随机推荐

  1. PostgreSQL函数如何返回数据集

    背景: PostgreSQL里面没有存储过程,只有函数,其他数据库里的这两个对象在PG里都叫函数. 函数由函数头,体和语言所组成,函数头主要是函数的定义,变量的定义等,函数体主要是函数的实现,函数的语 ...

  2. LeetCode算法训练-回溯总结

    欢迎关注个人公众号:爱喝可可牛奶 LeetCode算法训练-回溯总结 适用问题 组合问题:N个数里面按一定规则找出k个数的集合 排列问题:N个数按一定规则全排列,有几种排列方式 切割问题:一个字符串按 ...

  3. cowtransfer（奶牛快传）自动上传文件脚本—流程分析

    cowtransfer(奶牛快传)自动上传文件脚本-流程分析 序言: 距离上传发文也有几天了,这几天也是将这个脚本优化了一下.如果还不清楚这个脚本的效果是怎么样的小伙伴可以看看我上篇文章.话不多说,我 ...

  4. 恢复Gitee删除的文件

    在Gitee仓库中删除了某文件,发现idea里面的该文件也没有了,恢复方法: 1.在diea中找到被删掉文件所在的文件夹右键. 2.点击Local History再点击Show History. 3. ...

  5. 20192326杨沥凯 实验一《Linux基础与Java开发环境》实验报告

    20192326杨沥凯 2020-2021-1 <数据结构与面向对象程序设计>实验一报告 课程:<程序设计与数据结构> 班级: 1923 姓名: 杨沥凯 学号:20192326 ...

  6. Vue基础 · 父子组件之间的交互（5）

    1.父子组件交互 <body> <div id="app"> <!--子组件接收到"change"方法,绑定父组件的方法--> ...

  7. SAP FBL1N屏幕增强，增加自定义的列

    需求 因财务想要在查看未清和已清凭证的时候,看到是该凭证是否哪一个采购人员创建,因此新增一列创建人,关联关系是 EKKO-EBELN=BSEG-ZUONR,这里关联分配号是因为之前开发自动清账的时候做 ...

  8. Asp.NET core/net 5接口返回实体含有long/int64的属性序列后最后几位变为0的解决

    Asp.NET core /net 5接口返回实体含有long/int64的属性时,序列后最后几位变为0的. 不得不吐槽一下MS,这种事还有问题,NND. 解决方案在startup.cs中添加:opt ...

  9. Jmeter使用文档（循环怎么用）

    Jmeter使用文档(循环怎么用) 基础用法 修改语言 Jmeter之界面语言设置 下面使用简体中文的命名进行说明 打开日志 启动后,右上角有个黄色的感叹号图标,点击即可打开即时日志 如果没有看到重启 ...

  10. CentOS7下MySQL数据的导入和导出

    一.数据导入 (1)进入mysql [root@localhost mysql]# mysql -u root -p (2)转到对应数据库下 mysql> use zenith_star; (3 ...