如何使用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. kali-国内源-更新系统

    1.更换国内源 vim /etc/apt/sources.list deb https://mirrors.aliyun.com/kali kali-rolling main non-free con ...

  2. Git提交代码报错husky ＞ pre-commit,

    拉取了新项目以后,git突然不能用了   报husky > pre-commit, 解决办法:进入你的项目显示隐藏git文件  进入git文件   找到  hooks / pre-commit  ...

  3. Codeforces Round #757 (Div. 2) - D2. Divan and Kostomuksha (hard version)

    GCD + DP + 调和级数/埃式筛 [Problem - D - Codeforces](https://codeforces.com/contest/1610/problem/D) 题意 给出一 ...

  4. 2023 年 CCF 春季测试赛模拟赛 - 2 题解

    T1 约数和 标准解法 \(n = a_1^{b_1} \times a_2^{b_2} \dots a_k^{b_k}\) 那么根据算术基本定理的推广,约数个数和约数和都是可以快速计算得到 约数和 ...

  5. LinuxGPU服务器搭建

    (1)驱动与cuda下载: https://www.nvidia.cn/Download/Find.aspx?lang=cn (2)执行以下命令进行安装,文件名替换为自己的. sudo sh NVID ...

  6. pytest框架增加log打印（包括pytest的执行结果、自定义的log信息）

    前言: 之前同事在跑脚本的时候报错了,发现没法把需要的log信息打印出来,我这边定位问题比较麻烦,所以增加了log的打印.这个问题之前已经处理过了,本来以为是小问题,结果今天又要用到这个小技巧的时候居 ...

  7. Kotlin初学习

    Java和Kotlin数据类型对照表

  8. Excel列动态导出

    列动态导出的Excel,大致整了一下,没有过多深入. 1.首先定义列样式 package a.b.common.util.excel.stream; import java.util.Objects; ...

  9. 【SSO单点系列】（6）：CAS4.0 之中文乱码

    CAS登录会将登录名回传给客户端以xml的格式   但是回传后乱码客户端无法正确解析 二.解决方法 ServiceValidateController.java private ModelAndVie ...

  10. Springboot多数据源使用示例

    1.配置文件 spring.datasource.url=jdbc:mysql://198.168.1.1:3306/user?useUnicode=true&characterEncodin ...