松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › CSS › 45个值得收藏的 CSS 形状

45个值得收藏的 CSS 形状

迦娜王
2年前CSS
556 0 0

CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。

我们还可以使用 CSS 伪元素中的 ::before 和 ::after,这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧,我们可以只用一个 HTML 元素在 CSS 中创建许多形状。

虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。

1.正方形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

2.长方形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

3.圆形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

4.椭圆形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

5.上三角

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

6.下三角

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

7.左三角

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

8.右三角

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

9.左上角

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

10.右上角

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

11.左下角

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

12.右下角

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

13.箭头

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

14.梯形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

15.平行四边形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

16.星星 (6角)

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

17.星星 (5角)

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

18.五边形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

19.六边形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

20.八边形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

21.爱心

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

22.无穷大

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

23.菱形

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

24.钻石

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

25.钻戒

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

26.钻石2

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

27.蛋蛋

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

28.吃豆人

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

29.对话泡泡

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

30. 12点 爆发

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

31. 8点 爆发

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

32.太极

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

33.徽章丝带

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

34.太空入侵者(电脑游戏名)

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

35.电视

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

36.雪佛龙

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

37.放大镜

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

38.Facebook图标

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

39.月亮

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

40.旗

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

41.圆锥

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

42.十字架

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

43.根基

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

44.指示器

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状

45.锁

45个值得收藏的 CSS 形状
45个值得收藏的 CSS 形状
css
0
推介一个堪称神器的 Grid 代码生成器!前端工程师必备神器
上一篇
让 Java 开发更简单,提高工作效率 | Gitee 项目推荐
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
Servicios profesionales Organizaciones
1年前
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
1年前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
1年前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
1年前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
推介一个堪称神器的 Grid 代码生成器!前端工程师必备神器
你离可视化酷炫大屏只差一套 Kylin + Davinci
为什么你的设计这么烂?-科学UI设计流程改进作品
Github上一款受欢迎的基于Flexbox的现代纯CSS框架——bulma.css
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top