如何使用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. ABP微服务学习系列-修复System.Text.Json不支持序列化Exception

    前面我们已经把服务都启动了,然后我们试试请求API.发现请求出现500 返回错误 System.NotSupportedException: Serialization and deserializa ...

  2. mysql的双1设置是什么？

    innodb_flush_log_at_trx_commit和sync_binlog 两个参数是控制MySQL磁盘写入策略以及数据安全性的关键参数.如果innodb_flush_log_at_trx_ ...

  3. Linux数据实时同步（sersync+rsync）

    一.Slave服务器配置 1.在Slave服务器上安装Rsync [root@slave ~]# rpm -ivh rsync-3.1.2-11.el7_9.x86_64.rpm ###rpm 自行下 ...

  4. WINFORM DEVEXPRESS插件常用功能总结

    前言 DevExpress 控件的功能比较强大,是全球知名控件开发公司,对于开发 B/S 或 C/S 都非常出色,可以实现很炫且功能强大的效果.DevExpress Winform 常用控件是本人在前 ...

  5. cuda+pytorch环境安装

    本机cuda版本为v11.5 conda install cudatoolkit 使用 CUDA 11.3版本的配置 conda install pytorch==1.11.0 torchvision ...

  6. 如何卸载win10自带的输入法？

    如何卸载win10自带的输入法?  本来没想过卸载win10自带的微软拼音输入法,但是它和今天安装的搜狗拼音输入法不兼容,没办法,我就上网搜教程如何卸载它,教程亲试有效哦! 网址:http://www ...

  7. vue2/vue3+eslint文件格式化

    vue+javascript 1.设置vscode保存时格式化文件 2.打开settings.json 3.设置settings.json文件 { "editor.codeActionsOn ...

  8. Mac 压缩软件Keka

    ​ mac 的压缩软件Keka,相对比较好用的一款压缩软件 Keka - the macOS file archiver 点击下载 安装就好. ​编辑 支持可创建的压缩文件格式,和可解压缩的文件格式列 ...

  9. （性能测试笔记）逻辑IO和物理IO的区别

    IO性能对于一个系统的影响是至关重要的. 一个系统经过多项优化以后,瓶颈往往落在数据库:而数据库经过多种优化以后,瓶颈最终会落到IO.而IO性能的发展,明显落后于CPU的发展.Memchached也好 ...

  10. 靶场练习3: Funbox2

    信息收集阶段 扫描端口 sudo nmap -p- -n -v -sS --max-retries=0 172.16.33.30 发现开放端口21,22,80,扫描版本 sudo nmap -p21, ...